这篇文章主要给大家介绍了Vue+element+cookie记住密码功能的简单实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
实现功能：
1、登录时勾选记住密码，用cookie保存账号和密码并对密码进行两次加密处理（纯前端），下次登录自动输入账号密码
2、登录时不勾选，清空cookie，下次登录需要输入
效果图：
=============================================================================================================================================================================================
Html
<div class="login-form-item"> <span><i class="el-icon-user"></i></span><br> <span><i class="el-icon-lock"></i></span><br> 记住密码 登录</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; <i style="color:transparent">本文来源gaodai$ma#com搞$$代**码网$</i>} }); },
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 </div><p>一定要创建后读取cookie</p><div class="gaodaimacode"><pre class="prettyprint linenums"> created () { this.getCookie() },
总结
以上就是Vue+element+cookie记住密码功能的简单实现方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue+element+cookie记住密码功能的简单实现方法
转载请注明原文链接：Vue+element+cookie记住密码功能的简单实现方法
