實(shí)現(xiàn)功能：

1、登錄時(shí)勾選記住密碼，用cookie保存賬號(hào)和密碼并對(duì)密碼進(jìn)行兩次加密處理（純前端），下次登錄自動(dòng)輸入賬號(hào)密碼

2、登錄時(shí)不勾選，清空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: ’驗(yàn)證碼不能為空’},]' > <el-row class='sidentify'><el-col :span='21'> <el-input type='age' v-model='ValidateForm.sidentify' autocomplete='off' placeholder='驗(yàn)證碼'></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; // 驗(yàn)證碼通過(guò) 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’ }) //調(diào)用check選中方法 this.checkedPwd(username,pwd) this.$router.push({name:’Home’}) }else { this.$message({ message : ’賬號(hào)或密碼錯(cuò)誤，請(qǐng)重新輸入！’, type : ’error’ }) //清空 this.resetForm(’ValidateForm’) //刷新驗(yàn)證碼 this.$refs.switchSidentify.changeCode() } }) }else { this.$message({ message : ’驗(yàn)證碼輸入錯(cuò)誤，請(qǐng)重新輸入！’, type : ’error’ }) this.$refs.switchSidentify.changeCode() this.resetForm(’ValidateForm’) } } else { return false; } });},

check方法：

checkedPwd(username,pwd){ // 記住密碼進(jìn)行cookie存儲(chǔ)和密碼加密 if (this.checked){ // base64 加密 let base64Pwd=Base64.encode(pwd); // Encrypt 加密 let cryptoJsPwd=CryptoJS.AES.encrypt(base64Pwd,key).toString() // 賬號(hào)密碼保存天數(shù) this.setCookie(username,cryptoJsPwd,7) }else{ // 清空 this.clearCookie() }},

設(shè)置讀取和清空cookie

// 設(shè)置cookiesetCookie(c_name, c_pwd, exdays) { var exdate = new Date(); // 獲取時(shí)間 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天數(shù) // 字符串拼接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值都為空，天數(shù)為負(fù)1天就好了},

一定要?jiǎng)?chuàng)建后讀取cookie

created () { this.getCookie()},

總結(jié)

到此這篇關(guān)于Vue+element+cookie記住密碼功能的簡(jiǎn)單實(shí)現(xiàn)方法文章就介紹到這了,更多相關(guān)Vue+element+cookie記住密碼功能內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！