【Vue】使用crypto-js加解密

2021-04-26 10:02:49 阅读：241 来源： 互联网

标签：AES Vue bytes secretkey123 加解密 crypto cookie var CryptoJS

第一步，安装

npm install crypto-js

第二步，在你需要的vue组件内import

import CryptoJS from "crypto-js";

第三步，使用

在这里插入图片描述

登录的方法如下：

最后要在created狗子函数内判断用户是否记住了密码来执行相关的操作

//设置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); 
    }

// 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’

//设置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)//打印一下看看有没有加密成功

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 => {
//----
});
},

//判断是否记住密码
//注意这里的true是字符串格式，因为Boolean存进localstorage中会变成String
created() {
//判断是否记住密码
if (localStorage.getItem(“rememberPsw”) == ‘true’) {
this.getCookie();
}
}

标签：AES,Vue,bytes,secretkey123,加解密,crypto,cookie,var,CryptoJS
来源： https://blog.csdn.net/YhWyl527/article/details/116143890

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【Vue】使用crypto-js加解密