相思资源网 Design By www.200059.com
使用crypto-js加解密
第一步,安装
npm install crypto-js
第二步,在你需要的vue组件内import
import CryptoJS from "crypto-js";
第三步,使用
// Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(cipherText) // Decrypt 解密 var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123"); var originalText = bytes.toString(CryptoJS.enc.Utf8); console.log(originalText); // 'my message'
注意这个mymessage是字符串,如果你要加密的用户id(number类型)得先转成字符串
更多使用请访问官方文档
记住密码
- 实现原理是登录的时候,如果勾选了记住密码(把‘记住密码'状态保存到localstorage)就保存账号密码到cookies;
- 之后进入登录页面的时候,判断是否记住了密码(从localstorage判断),如果记住密码则导出cookies到表单;
其中保存使用setcookie方法,取出则使用getcookie方法。
ok,我们来编写方法
//设置cookie setCookie(portId, psw, exdays) { // Encrypt,加密账号密码 var cipherPortId = CryptoJS.AES.encrypt( portId+'', "secretkey123" ).toString(); var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString(); console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功 var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数 //字符串拼接cookie,为什么这里用了==,因为加密后的字符串也有个=号,影响下面getcookie的字符串切割,你也可以使用更炫酷的符号。 window.document.cookie = "currentPortId" + "==" + cipherPortId + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "password" + "==" + cipherPsw + ";path=/;expires=" + exdate.toGMTString(); }, //读取cookie getCookie: function() { if (document.cookie.length > 0) { var arr = document.cookie.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 = bytes.toString(CryptoJS.enc.Utf8)-0; } else if (arr2[0] == "password") { // Decrypt,将解密后的内容赋值给密码 var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123"); this.password = bytes.toString(CryptoJS.enc.Utf8); } } } }, //清除cookie clearCookie: function() { this.setCookie("", "", -1); }
登录的方法如下:
login() { this.$http //请根据实际情况修改该方法 .post(...) .then(res => { if (res.data.code == "success") { if (this.rememberPsw == true) { //判断用户是否勾选了记住密码选项rememberPsw,传入保存的账号currentPortId,密码password,天数30 this.setCookie(this.currentPortId, this.password, 30); }else{ this.clearCookie(); } //这里是因为要在created中判断,所以使用了localstorage比较简单,当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。 localStorage.setItem("rememberPsw", this.rememberPsw); } else { //---- } }) .catch(err => { //---- }); },
最后要在created狗子函数内判断用户是否记住了密码来执行相关的操作
//判断是否记住密码 //**注意这里的true是字符串格式,因为Boolean存进localstorage中会变成String** created() { //判断是否记住密码 if (localStorage.getItem("rememberPsw") == 'true') { this.getCookie(); } }
最后,界面贴上,其中rememberPsw是记住密码按钮的v-model值,currentPortId是第一个框的v-model值,password就是第二个框的v-model值啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无vue中使用cookies和crypto-js实现记住密码和加密的方法的评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。