vue中使⽤cookies和crypto-js实现记住密码和加密的⽅法使⽤crypto-js加解密
第⼀步，安装
npm install crypto-js
第⼆步，在你需要的vue组件内import
import CryptoJS from "crypto-js";
第三步，使⽤
// Encrypt 加密
var cipherText = pt(
"my message",
"secretkey123"
).toString();
字符串长度jsconsole.log(cipherText)
// Decrypt 解密
var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123");
var originalText = Utf8);
console.log(originalText); // 'my message'
注意这个mymessage是字符串，如果你要加密的⽤户id（number类型）得先转成字符串
更多使⽤请访问
记住密码
实现原理是登录的时候，如果勾选了记住密码（把‘记住密码'状态保存到localstorage）就保存账号密码到cookies；
之后进⼊登录页⾯的时候，判断是否记住了密码（从localstorage判断），如果记住密码则导出cookies到表单；
其中保存使⽤setcookie⽅法，取出则使⽤getcookie⽅法。
ok，我们来编写⽅法
//设置cookie
setCookie(portId, psw, exdays) {
// Encrypt，加密账号密码
var cipherPortId = pt(
portId+'',
"secretkey123"
).toString();
var cipherPsw = pt(psw+'', "secretkey123").toString();
console.log(cipherPortId+'/'+cipherPsw)//打印⼀下看看有没有加密成功
var exdate = new Date(); //获取时间
exdate.Time() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
//字符串拼接cookie，为什么这⾥⽤了==，因为加密后的字符串也有个=号，影响下⾯getcookie的字符串切割，你也可以使⽤更炫酷的符号。
kie =
"currentPortId" +
"==" +
cipherPortId +
";path=/;expires=" +
kie =
"password" +
"==" +
cipherPsw +
";path=/;expires=" +
},
//读取cookie
getCookie: function() {
if (kie.length > 0) {
var arr = kie.split("; "); //这⾥显⽰的格式请根据⾃⼰的代码更改
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split("=="); //根据==切割
/
/判断查相对应的值
if (arr2[0] == "currentPortId") {
// Decrypt，将解密后的内容赋值给账号
var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
this.currentPortId = Utf8)-0;
} else if (arr2[0] == "password") {
// Decrypt，将解密后的内容赋值给密码
var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
this.password = Utf8);
}
}
}
},
//清除cookie
clearCookie: function() {
this.setCookie("", "", -1);
}
登录的⽅法如下：
login() {
this.$http //请根据实际情况修改该⽅法
.post(...)
.then(res => {
if (de == "success") {
if (berPsw == true) {
//判断⽤户是否勾选了记住密码选项rememberPsw，传⼊保存的账号currentPortId，密码password，天数30
this.setCookie(this.currentPortId, this.password, 30);
}else{
this.clearCookie();
}
//这⾥是因为要在created中判断，所以使⽤了localstorage⽐较简单，当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。
localStorage.setItem("rememberPsw", berPsw);
} else {
//----
}
})
.catch(err => {
//----
});
},
最后要在created狗⼦函数内判断⽤户是否记住了密码来执⾏相关的操作
//判断是否记住密码
//**注意这⾥的true是字符串格式，因为Boolean存进localstorage中会变成String**
created() {
/
/判断是否记住密码
if (Item("rememberPsw") == 'true') {
}
}
最后，界⾯贴上，其中rememberPsw是记住密码按钮的v-model值，currentPortId是第⼀个框的v-model值，password就是第⼆个框的v-model值啦。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。