vue中使用cookies和crypto-js实现记住密码和加密的方法

npm install crypto-js

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'

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

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