前提:
将浏览器的自动填充密码功能关闭,如果关闭不了,可参考https://blog.youkuaiyun.com/csdn_zhuang/article/details/104818168
方案:
1、安装加解密插件,并在login.vue中引用:
安装:
npm install crypto-js
login.vue引用:
import CryptoJS from "crypto-js";
2、html部分:
<el-form-item style="margin-top:-10px;margin-bottom:-5px;">
<el-checkbox v-model="checked" style="color:#a0a0a0;margin-top:-10px;">记住密码</el-checkbox>
</el-form-item>
data部分:
checked: true
methods部分:
提交时候,根据是否记住密码,选择更新cookie还是清空:
submit() {
if (this.checked) {
//传入账号名,密码,和保存天数3个参数
this.setCookie(this.loginForm.userName, this.loginForm.password, 7);
} else {
//清空Cookie
this.clearCookie();
}
}
},
加解密cookie过程:
//设置cookie
setCookie(c_name, c_pwd, exdays) {
var exdate = new Date(); //获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
// Encrypt,加密账号密码
var cipherName = CryptoJS.AES.encrypt(
this.loginForm.userName + "",
"secretkey123"
).toString();
var cipherPsw = CryptoJS.AES.encrypt(
this.loginForm.password + "",
"secretkey123"
).toString();
//字符串拼接cookie
window.document.cookie =
"userName" +
"=" +
cipherName +
";path=/;expires=" +
exdate.toGMTString();
window.document.cookie =
"userPwd" + "=" + cipherPsw + ";path=/;expires=" + exdate.toGMTString();
},
getCookie() {
if (document.cookie.length > 0) {
var arr = document.cookie.split("; ");
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split("=", 2); //再次切割
//判断查找相对应的值
if (arr2[0] == "userName") {
// Decrypt,将解密后的内容赋值给账号
var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
this.loginForm.userName = bytes.toString(CryptoJS.enc.Utf8);
} else if (arr2[0] == "userPwd") {
// Decrypt,将解密后的内容赋值给密码
var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
this.loginForm.password = bytes.toString(CryptoJS.enc.Utf8);
}
}
}
},
//清除cookie
clearCookie() {
this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
},