最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue中cookies以及crypto-js如何实现密码的加密并记住

来源:动视网 责编:小采 时间:2020-11-27 19:30:24
文档

vue中cookies以及crypto-js如何实现密码的加密并记住

vue中cookies以及crypto-js如何实现密码的加密并记住:本章给大家介绍关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。使用crypto-js加解密第一步,安装npm install crypto-js第二步,在你需要的vue组件内importimp
推荐度:
导读vue中cookies以及crypto-js如何实现密码的加密并记住:本章给大家介绍关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。使用crypto-js加解密第一步,安装npm install crypto-js第二步,在你需要的vue组件内importimp
 本章给大家介绍关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

使用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类型)得先转成字符串

更多使用请访问官方文档

记住密码

  1. 实现原理是登录的时候,如果勾选了记住密码(把‘记住密码’状态保存到localstorage)就保存账号密码到cookies;

  2. 之后进入登录页面的时候,判断是否记住了密码(从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值啦。

文档

vue中cookies以及crypto-js如何实现密码的加密并记住

vue中cookies以及crypto-js如何实现密码的加密并记住:本章给大家介绍关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。使用crypto-js加解密第一步,安装npm install crypto-js第二步,在你需要的vue组件内importimp
推荐度:
标签: 加密 VUE cookie
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top