溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue+element+cookie實現一個記住密碼功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
實現功能：
1、登錄時勾選記住密碼，用cookie保存賬號和密碼并對密碼進行兩次加密處理（純前端），下次登錄自動輸入賬號密碼
2、登錄時不勾選，清空cookie，下次登錄需要輸入
效果圖：
=============================================================================================================================================================================================
Html
<div class="login-form-item">
<el-form :model="ValidateForm" ref="ValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item
prop="username"
:rules="[{ required: true, message: '用戶名不能為空'}
]">
<span><i class="el-icon-user"></i></span><el-input type="username" v-model.number="ValidateForm.username" autocomplete="off" clearable placeholder="用戶名"></el-input>
</el-form-item>
<br>
<el-form-item
prop="password"
:rules="[{ required: true, message: '密碼不能為空'},
]">
<span><i class="el-icon-lock"></i></span><el-input type="password" v-model.number="ValidateForm.password" autocomplete="off" clearable show-password placeholder="密碼"></el-input>
</el-form-item>
<br>
<el-form-item
prop="sidentify"
:rules="[
{ required: true, message: '驗證碼不能為空'},]"
>
<el-row class="sidentify">
<el-col :span="21">
<el-input type="age" v-model="ValidateForm.sidentify" autocomplete="off" placeholder="驗證碼"></el-input>
</el-col>
<el-col :span="3" class="sidentify sidentify-img">
<sidentify :changeCode.sync='identifyCode' ref="switchSidentify"></sidentify>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-checkbox v-model="checked" class="sidentify">記住密碼</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ValidateForm')" class="login-btn">登錄</el-button>
</el-form-item>
</el-form>
</div>加密方法我用的base64和CryptoJS 大家記得去下載
js部分：
登錄
// 登錄
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let username=this.ValidateForm.username;
let pwd=this.ValidateForm.password;
let sidentify=this.ValidateForm.sidentify;
// 驗證碼通過
if (sidentify == this.identifyCode){
this.request.post(this.api.login.logindo,{username:username,pwd:pwd}).then((res)=>{
console.log(res);
if (res.data.code == 200){
this.$message({
message : '登錄成功！',
type : 'success'
})
//調用check選中方法
this.checkedPwd(username,pwd)
this.$router.push({name:'Home'})
}else {
this.$message({
message : '賬號或密碼錯誤，請重新輸入！',
type : 'error'
})
//清空
this.resetForm('ValidateForm')
//刷新驗證碼
this.$refs.switchSidentify.changeCode()
}
})
}else {
this.$message({
message : '驗證碼輸入錯誤，請重新輸入！',
type : 'error'
})
this.$refs.switchSidentify.changeCode()
this.resetForm('ValidateForm')
}
} else {
return false;
}
});
},check方法：
checkedPwd(username,pwd){
// 記住密碼進行cookie存儲和密碼加密
if (this.checked){
// base64 加密
let base64Pwd=Base64.encode(pwd);
// Encrypt 加密
let cryptoJsPwd=CryptoJS.AES.encrypt(base64Pwd,key).toString()
// 賬號密碼保存天數
this.setCookie(username,cryptoJsPwd,7)
}else{
// 清空
this.clearCookie()
}
},設置讀取和清空cookie
// 設置cookie
setCookie(c_name, c_pwd, exdays) {
var exdate = new Date(); // 獲取時間
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天數
// 字符串拼接cookie
window.document.cookie = "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
// 讀取cookie
getCookie: function() {
if (document.cookie.length > 0) {
//checked為true
this.checked=true
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
if (arr2[0] == 'username') {
this.ValidateForm.username = arr2[1];
} else if (arr2[0] == 'password') {
// Decrypt 解密
let bytes = CryptoJS.AES.decrypt(arr2[1],key)
let originalText=bytes.toString(CryptoJS.enc.Utf8)
// base64解密
let pwd=Base64.decode(originalText)
this.ValidateForm.password = pwd;
}
}
}
},
// 清除cookie
clearCookie: function() {
this.setCookie("", "", -1); // 修改2值都為空，天數為負1天就好了
},一定要創建后讀取cookie
created () {
this.getCookie()
},關于Vue+element+cookie實現一個記住密碼功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
