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

更多使用请访问

记住密码

• 实现原理是登录的时候，如果勾选了记住密码（把‘记住密码'状态保存到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值啦。

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