實現功能：

1、登錄時勾選記住密碼，用cookie保存賬號和密碼并對密碼進行兩次加密處理（純前端），下次登錄自動輸入賬號密碼

2、登錄時不勾選，清空cookie，下次登錄需要輸入

效果圖：

=============================================================================================================================================================================================

Html

<div class='login-form-item'> <el-form :model='ValidateForm' ref='ValidateForm' label- class='demo-ruleForm'> <el-form-itemprop='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-itemprop='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-itemprop='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

// 設置cookiesetCookie(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();},// 讀取cookiegetCookie: 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; } } }},// 清除cookieclearCookie: function() { this.setCookie('', '', -1); // 修改2值都為空，天數為負1天就好了},

一定要創建后讀取cookie

created () { this.getCookie()},

總結

到此這篇關于Vue+element+cookie記住密碼功能的簡單實現方法文章就介紹到這了,更多相關Vue+element+cookie記住密碼功能內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！