vue+CryptoJS+cookie实现保存账号密码

安装依赖

npm i crypto-js --save

HTML

<el-input v-model="username" placeholder="用户名"></el-input>
<el-input v-model="password" placeholder="密码"></el-input>
<el-checkbox v-model="checked">记住密码</el-checkbox>

JS

mounted() {
    this.getCookie();
},

//表单提交方法
submit( ){
    if (that.checked == true) {
        //传入账号，密码，保存天数
        that.setCookie(values.username, values.password, 7);
    } else {
        //清空Cookie
        that.clearCookie();
    }
}

//设置cookie方法
            setCookie(username, password, days) {
                var text = CryptoJS.AES.encrypt(password, 'secret key 123'); //使用CryptoJS方法加密
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * days); //保存的天数
                //字符串拼接存入cookie
                document.cookie = "username" + "==" + username + ";path=/;expires=" + exdate.toGMTString();
                document.cookie = "password" + "==" + text + ";path=/;expires=" + exdate.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('=='); //再次切割
                        //这里会切割出以username为第0项的数组、以password为第0项的数组，判断查找相对应的值
                        if (arr2[0] == 'adminusername') {
                            this.form.setFieldsValue({
                                username: arr2[1],
                            });
                        } else if (arr2[0] == 'adminpassword') {
                            //拿到拿到加密后的密码arr2[1]并解密
                            var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'secret key 123');
                            var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码（登录时输入的密码）
                            this.form.setFieldsValue({
                                password: plaintext,
                            });
                        }
                    }
                }
            },

//清除cookie
            clearCookie() {
                this.setCookie("", "", -1); //账号密码置空，天数置0
            }