一、清理不必要的文件

        1、删除auth-redirect.vue

                a、在根目录src文件夹下views文件夹下找到登录文件夹login，在login文件夹中删除auth-redirect.vue文件。

                b、在根目录mock文件夹下role文件夹中的routes.js文件中，删除下面的代码

{
    path: '/auth-redirect',
    component: 'views/login/auth-redirect',
    hidden: true
},

                c、在根目录src文件夹下route文件夹中的index.js文件中，删除下面的代码

{
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
},

                d、在根目录src文件夹下permission.js文件中，将const whiteList = ['/login',
'/auth-redirect']修改为const whiteList = ['/login']

        2、删除第三方组件

                a、在根目录src文件夹下views文件夹下找到登录文件夹login，在login文件夹中删除components文件夹。

        3、删除登录页面代码

                a、在根目录src文件夹下views文件夹下找到登录文件夹login，在login文件夹中修改index.vue文件，删除如下代码：

import SocialSign from './components/SocialSignin'
components: { SocialSign },
showDialog: false,

<el-dialog title="Or connect with" :visible.sync="showDialog">Can not be simulated on local, so please combine you own business simulation! ! !<br><br><br><social-sign />
</el-dialog>
<div style="position:relative">
    <div class="tips">
        <span>Username : admin</span>
        <span>Password : any</span>
    </div>
    <div class="tips">
        <span style="margin-right:18px;">Username : editor</span>
        <span>Password : any</span>
    </div>
    <el-button class="thirdparty-button" type="primary" @click="showDialog=true">Or connect with</el-button>
</div>

二、添加登录页面验证码功能

        1、更改配置参数

                a、在根目录下.env.development文件中修改VUE_APP_BASE_API参数值，将参数值改为

http://controlapi.yuanlongsoftware.cn，也就是你后端api访问的网址

        2、添加获取验证码方法

                a、在根目录下src文件夹下找到api文件夹。在里面新建common.js文件，然后添加如下代码：

export function getCode() {
    return request({
        url: '/login/get_code',
        method: 'get'
    })
}

        3、添加登录页面验证码显示

                在根目录src文件夹下views文件夹下找到登录文件夹login，在login文件夹中修改index.vue文件

                a、引入公用js文件

import { getCode } from '@/api/common'

                b、在return对象里面定义code并赋值为空

code: '',

                c、在created对象里面调用获取验证码方法

this.changeCode()

                d、在methods对象里面开发获取验证码方法。因我们的验证码后端返回的是base64，所以我们需要开发base64转化方法

//获取验证码
async changeCode() {
    const res = await getCode()
    this.code = window.URL.createObjectURL(this.convertBase64ToBlob(res.data));
}

//转化base64
convertBase64ToBlob(base64) {
    const parts = base64.split(';base64,');
    const contentType = parts[0].split(':')[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
}

                e、在html代码里面添加如下代码：

<el-form-item prop="captcha_code">
    <span class="svg-container">
        <svg-icon icon-class="user" />
    </span>
    <el-input
        ref="captcha_code"
        v-model="loginForm.captcha_code"
        placeholder="请输入验证码"
        autocomplete="off"
        autocapitalize="off"
        spellcheck="false"
        name="captcha_code"
        type="text"
        tabindex="3"
        @keyup.enter.native="handleLogin"
    />
    <span style="position:absolute;right:0px;top:0px;font-size:16px;color:#889aa4;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" @click="changeCode">
        <img ref="captcha_code" :src="code" style="width:200px;height:50px;margin:0px;padding:0px;">
    </span>
</el-form-item>

三、添加验证方法

        1、邮箱验证方法

export function validEmail(email) {
    const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return reg.test(email)
}

        2、密码强度验证方法

export function validPassword(str) {
    let modes = 1
    if (str.length >= 6 && str.length <= 20) {
        if (/\d/.test(str)) modes++ // 数字
        if (/[a-z]/.test(str)) modes++ // 小写
        if (/[A-Z]/.test(str)) modes++ // 大写
        if (/\W/.test(str)) modes++ // 特殊字符
    }
    // 逻辑处理
    if (modes === 1) {
        return '密码长度只能是6到20位之间'
    } else if (modes === 2) {
        return '密码的强度不够'
    } else {
        return true
    }
}

        3、添加数字验证方法

export function validCode(str) {
    return /^[0-9]{4}$/.test(str)
}

四、提前说明

        下一步开始做登录操作