使用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，我們來編寫方法

//設置cookiesetCookie(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();},//讀取cookiegetCookie: 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);} else if (arr2[0] == "password") {// Decrypt，將解密后的內容賦值給密碼var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");this.password = bytes.toString(CryptoJS.enc.Utf8);}}}},//清除cookieclearCookie: function() {this.setCookie("", "", -1); }

登錄的方法如下：

login() {this.$http //請根據實際情況修改該方法.post(...).then(res => {if (res.data.code == "success") {if (this.rememberPsw == true) {//判斷用戶是否勾選了記住密碼選項rememberPsw，傳入保存的賬號currentPortId，密碼password，天數30this.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值啦。

總結

以上是生活随笔為你收集整理的vue中使用cookies和crypto-js实现记住密码和加密的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。