溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中使用cookies和crypto-js實現(xiàn)記住密碼和加密的方法

發(fā)布時間：2020-08-23 13:08:42 來源：腳本之家 閱讀：266 作者：李大雷 欄目：web開發(fā)

使用crypto-js加解密

第一步，安裝

npm install crypto-js

第二步，在你需要的vue組件內(nèi)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類型）得先轉(zhuǎn)成字符串

更多使用請訪問官方文檔

記住密碼

  • 實現(xiàn)原理是登錄的時候，如果勾選了記住密碼（把‘記住密碼'狀態(tài)保存到localstorage）就保存賬號密碼到cookies；
  • 之后進入登錄頁面的時候，判斷是否記住了密碼（從localstorage判斷），如果記住密碼則導(dǎo)出cookies到表單；

其中保存使用setcookie方法，取出則使用getcookie方法。

ok，我們來編寫方法

//設(shè)置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); //保存的天數(shù)
   //字符串拼接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("; "); //這里顯示的格式請根據(jù)自己的代碼更改
    for (var i = 0; i < arr.length; i++) {
     var arr2 = arr[i].split("=="); //根據(jù)==切割
     //判斷查找相對應(yīng)的值
     if (arr2[0] == "currentPortId") {
      // Decrypt，將解密后的內(nèi)容賦值給賬號
      var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
      this.currentPortId = bytes.toString(CryptoJS.enc.Utf8)-0;
     } else if (arr2[0] == "password") {
      // Decrypt，將解密后的內(nèi)容賦值給密碼
      var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
      this.password = bytes.toString(CryptoJS.enc.Utf8);
     }
    }
   }
  },
  //清除cookie
  clearCookie: function() {
   this.setCookie("", "", -1); 
  }

登錄的方法如下：

 login() {
   this.$http //請根據(jù)實際情況修改該方法
    .post(...)
    .then(res => {
     if (res.data.code == "success") {
      if (this.rememberPsw == true) {
        //判斷用戶是否勾選了記住密碼選項rememberPsw，傳入保存的賬號currentPortId，密碼password，天數(shù)30
       this.setCookie(this.currentPortId, this.password, 30);
      }else{
       this.clearCookie();
      }
      //這里是因為要在created中判斷，所以使用了localstorage比較簡單，當(dāng)然你也可以直接根據(jù)cookie的長度or其他騷操作來判斷有沒有記住密碼。
      localStorage.setItem("rememberPsw", this.rememberPsw);
      
     } else {
      //----
     }
    })
    .catch(err => {
     //----
    });
  },

最后要在created狗子函數(shù)內(nèi)判斷用戶是否記住了密碼來執(zhí)行相關(guān)的操作

//判斷是否記住密碼
//**注意這里的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實現(xiàn)記住密碼和加密的方法

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手