关于javascript:vue登录加密

1. 我的项目先下载 npm i crypto-js –save

2. 我的项目援用

2.1html 代码

<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="text" 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>

2.2js 代码

<script>
import CryptoJS from 'crypto-js' // 加密 js
export default {data() {
        return {
            ruleForm: {
                mobile: '', // 账号
                password: '' // 明码
            },
            checked: true // 是否选中记住明码 true 为选中
        };
    },
    // 判断是否记住明码
    // 留神这里的 true 是字符串格局，因为 Boolean 存进 localstorage 中会变成 string
    created(){
        // 判断是否记住明码
        if(localStorage.getItem("rememberPsw") == 'true'){this.getCookie()
        }
    },
    methods:{
        // 登录办法
        handleSubmit() {
            var that = this;
            let loginParams = {
               mobile: this.ruleForm.mobile, // 获取账号
               password: this.ruleForm.password // 获取明码
            };
            if (that.checked == true) {
                // 传入账号，明码，保留天数
                that.setCookie(that.ruleForm.mobile, that.ruleForm.password, 1);
            } else {
                // 清空 Cookie
                that.clearCookie();}
                localStorage.setItem("rememberPsw", that.checked);
            // // 登录申请
            // 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(saveDays.getTime() + 24 * 60 * 60 * 1000 * days); // 保留的天数
            console.log(saveDays)
            console.log(saveDays.toGMTString())
            // 字符串拼接存入 cookie
            // window.document.cookie = "mobile" + "=" + mobile + ";path=/;saveDays=" + saveDays.toGMTString();
            // window.document.cookie = "password" + "=" + text + ";path=/;saveDays=" + saveDays.toGMTString();
            
            window.document.cookie = "mobile" + "=" + mobile + ";path=/;expires=" + saveDays.toGMTString();
            window.document.cookie = "password" + "=" + text + ";path=/;expires=" + saveDays.toGMTString();},
        // 读取 cookie
        getCookie() {if (document.cookie.length > 0) {var arr = document.cookie.split(';'); // 这里显示的格局须要切割一下本人可输入看下
                console.log(arr)
                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>