vue 登錄 + 記住密碼 + 密碼加密解密

<template>
  <el-form :model="ruleForm">
    <h3 class="title">系統登錄</h3>
    <el-form-item prop="mobile">
      <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" 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>
    <el-checkbox v-model="checked" checked>記住密碼</el-checkbox>
    <el-form-item>
      <el-button type="primary" @click.native.prevent="handleSubmit">登錄</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    import { apis } from '../uitl/config'
    import CryptoJS from 'crypto-js' //加密js
    export default {
        data() {
            return {
                ruleForm: {
                    mobile: '', //賬號
                    password: '' //密碼
                },
                checked: true //是否選中記住密碼 true為選中
            };
        },
        methods:{
            //登錄方法
            handleSubmit() {
                var that = this;
                let loginParams = { 
                   mobile: this.ruleForm.mobile, //獲取賬號
                   password: this.ruleForm.password //獲取密碼
                };
                //登錄請求
                that.$axios.post(`${api}/auth/login`,loginParams).then((res)=>{
                    if(res.data.errCode == 0){
                        console.log('登錄成功')
                        if (that.checked == true) {
                            //傳入賬號，密碼，保存天數
                            that.setCookie(that.ruleForm.mobile, that.ruleForm.password, 7);
                        } else {
                            //清空Cookie
                            that.clearCookie();
                        }
                        //跳轉路由
                        that.$router.push({ path: '/index' });
                    }else{
                        console.log('登錄失敗')
                    }
                })
            }，
            //設置cookie方法
            setCookie(mobile, password, days) {
                var text = CryptoJS.AES.encrypt(password, 'secret key 123');//使用CryptoJS方法加密
                var saveDays = new Date(); //獲取時間
                saveDays.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * days); //保存的天數
                //字符串拼接存入cookie
                window.document.cookie = "mobile" + "=" + mobile + ";path=/;saveDays=" + saveDays.toGMTString();
                window.document.cookie = "password" + "=" + text + ";path=/;saveDays=" + saveDays.toGMTString();
            },
            //讀取cookie
            getCookie() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //這里顯示的格式需要切割一下自己可輸出看下
                    for (var i = 0; i < arr.length; i++) { 
                        var arr2 = arr[i].split('='); //再次切割
                        //這里會切割出以mobile為第0項的數組、以password為第0項的數組，判斷查找相對應的值
                        if (arr2[0] == 'mobile') {
                            this.ruleForm.mobile = arr2[1]; //拿到賬號
                        } else if (arr2[0] == 'password') {
                            //拿到拿到加密后的密碼arr2[1]並解密
                            var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'secret key 123');
                            var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密碼（登錄時輸入的密碼）
                            this.ruleForm.password = plaintext;
                        }
                    }
                }
            },
            //清除cookie
            clearCookie() {
                this.setCookie("", "", 0); //賬號密碼置空，天數置0
            }
        }
    }
</script>

需要裝加密插件

pm install crypto-js