vue 登錄 + 記住密碼 + 密碼加密解密

使用crypto-js加解密

第一步，安裝

npm install crypto-js

第二步，在你需要的vue組件內import

import CryptoJS from "crypto-js";

第三步，使用

記住密碼

1. 實現原理是登錄的時候，如果勾選了記住密碼（把‘記住密碼’狀態保存到localstorage）就保存賬號密碼到cookies；
2. 之后進入登錄頁面的時候，判斷是否記住了密碼（從localstorage判斷），如果記住密碼則導出cookies到表單；

其中保存使用setcookie方法，取出則使用getcookie方法。
ok，我們來編寫方法

登錄的方法如下：

最后要在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)//打印一下看看有沒有加密成功

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();
}
}