登录记住密码自己写

<template>
    <div class="adminLogin">
        <!-- 标题栏 -->
        <div class="sys-title center">
            <h1>后台管理系统</h1>            
        </div>
        <!-- 登录框 -->
        <div class="form">
            <!-- 左侧图片 -->
            <div class="form-img" >
                <img src="https://f12.baidu.com/it/u=3037456133,794478415&fm=72" alt="" style="100%;height:100%">
            </div>
            <!-- 右侧form表单 -->
            <div class="form-content">
                <!-- title -->
                <div class="login-title center">
                    <strong>登录</strong>
                </div>
                <!-- form表单 -->
                <div class="login-form">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm login-container">
                        <el-form-item  prop="loginName">
                            <el-input class="el-icon-yonghu" v-model="ruleForm.loginName" placeholder="用户名"></el-input>
                        </el-form-item>
                        <el-form-item  prop="password">
                            <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
                        </el-form-item>

                            <p >
                                <el-checkbox v-model="isChecked">记住密码</el-checkbox>
                                <span class="forget-pass" @click="forget">忘记密码</span>  
                            </p>

                        <!-- <el-form-item label="验证码" prop="validCode">
                            <img :src="verifyImg"/>
                            <el-input v-model="ruleForm.verifyCode" auto-complete="off"></el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="danger" width="100%" @click="login">登陆</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 注册 -->
                    <!-- <div>
                        <p class="isRegister">
                            <span>还没账号？</span>
                            <span class="red">立即注册</span>
                        </p>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- 版权所有 -->
        <div class="copyright center">
            <p>  [版本 6.1.7601]版权所有 (c) 2019 Microsoft Corporation。保留所有权利。</p>
        </div>
    </div>
</template>

<script>
import CryptoJS from 'crypto-js' //加密插件
import forget from './forget.vue'
export default {

    data() {
        return {
            isChecked: "",
            verifyImg: null,
            ruleForm: {
                loginName: '',
                password: '',
                verifyCode: ''
            },
            rules: {
                loginName: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.load()
    },
    methods: {
        load() {
            // 调用获取cookie的值
            this.getCookie()
            this.setMenuActive(null)
            this.setMenuList(null)
            this.$api.user.getVerifyCode({ 90, height: 100}).then(data=> {
                this.verifyImg = data
            })
        },
        login() {

            let param = {loginName: this.ruleForm.loginName, password: this.ruleForm.password}
            this.$api.user.login(param).then(data=> {
                console.log(data)
                if(data.retCode == 0) {
                    // 判断复选框是否被勾选; 勾选则调用配置Cookie方法
                    if (this.isChecked) {  // 记住密码
                        this.setCookie(this.ruleForm.loginName, this.ruleForm.password, 30)  // 保存期限为30天
                    } else {
                        this.clearCookie() // 清空 Cookie
                    }

                    // 检查用户名和密码是否一致
                    if(this.ruleForm.loginName == this.ruleForm.password){
                        console.log("一样？不行")
                        this.open(data)
                    }else{
                        // 把用户信息存放到store中，方便其他页面调用。
                        this.setUserInfo(data.user)

                        this.$router.push({path: '/index'})
                    }   
                } else {
                    this.$message.error('登录失败')
                }
            })
        },
        open(data){
            this.$prompt('用户名和密码不能一致，请设置新密码', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            //inputType:'password',
            inputPattern: /^[w]{6,18}$/,
            inputErrorMessage: '密码格式不正确,请输入6-18位的数字或字母'
            }).then(({ value }) => {
                let id = data.user.userId
                let old = this.ruleForm.password
                let newPass = value
                let param = {userId: id,oldPassword:old, newPassword: newPass}
                this.$api.user.modifyPassword(param).then(data=> {
                    this.$message({
                        type: 'success',
                        message: '修改成功，快去登录吧！'
                    })
               }) 
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '您取消了修改密码！'
              })      
            })
        },
        // 设置Cookie
        setCookie(username, password, exdays) { // 用户名, 密码, 保存天数
            let text = CryptoJS.AES.encrypt(password, 'secret key 123');//使用CryptoJS方法加密
            let exdate = new Date()             // 获取时间
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
            // 字符串拼接cookie
            window.document.cookie = 'userName=' + username + ';path=/;expires=' + exdate.toGMTString()
            window.document.cookie = 'userPwd=' + text + ';path=/;expires=' + exdate.toGMTString()
        },
        // 读取Cookie
        getCookie() {
            //console.log(document.cookie)
            if (document.cookie.length > 0) {
                // 检查cookie是否有过值
                this.isChecked = true
                let arr = document.cookie.split('; ')       // 这里显示的格式需要切割一下自己可输出看下
                for (let i = 0; i < arr.length; i++) {
                    let arr2 = arr[i].split('=')            // 再次切割
                    // 判断查找相对应的值
                    if (arr2[0] == 'userName') {
                        this.ruleForm.loginName = arr2[1]   // 保存到保存数据的地方
                    } else if (arr2[0] == 'userPwd') {

                        //拿到拿到加密后的密码arr2[1]并解密
                        var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'secret key 123');
                        var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码（登录时输入的密码）
                        this.ruleForm.password = plaintext;

                        //this.ruleForm.password = arr2[1]
                    }
                }
            }
        },
        // 清除Cookie
        clearCookie() {
            this.setCookie('', '', -1)                      // 修改2值都为空，天数为负1天就好了
        },
        // 忘记密码
        forget() {
            this.$modal(forget, '50%')
        },
    }
}
</script>

<style lang="scss">
.adminLogin{
    background-color: #b3080e;
    padding: 5% 25%;
    .sys-title{
        padding-bottom:30px;
    }
    .form{
        width:100%;
        height:300px;
        // border:1px solid #d3d3d3;
        background-color: #fff;
        .form-img{
            float:left;
            width:50%;
            height:100%;
            background-color:yellow;
        }
        .form-content{
            float:left;
            width:50%;
            margin: 0 auto;
            
            .login-title{
                margin-top:20px;
            }
            .login-form{
                padding: 30px;
                .forget-pass{
                    float:right;
                    font-size: 12px;
                    color:#b3080e;
                }
                .el-button{
                    margin-top:30px;
                    width:100%;
                    background-color: #b3080e;
                    
                }
            }
            .isRegister{
                font-size:12px;
                color:#666;
            }
        }
        
    }
    .copyright{
        padding-top:30px;
    }
    .center{
        text-align: center;
    }
    .red{
        color:#b3080e; 
    }
}
</style>