溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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類型）得先轉成字符串
更多使用請訪問官方文檔
記住密碼
其中保存使用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值啦。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
