上线了小程序官网_vue中使用cookies和crypto

摘要: vue中应用cookies和crypto-js完成记牢登陆密码和数据加密的方式 本文给大伙儿详细介绍一下有关vue中应用cookies和crypto-js怎样完成登陆密码的数据加密与记牢登陆密码,有一定的参照使...

vue中使用cookies和crypto-js实现记住密码和加密的方法       这篇文章给大家介绍一下关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
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到表单;

).toString(); var cipherPsw = CryptoJS.AES.encrypt(凡科抠图w+'', "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值啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:html网页模板