Vue+element+cookie实现记住密码功能


实现功能:

1、登录时勾选记住密码,用cookie保存账号和密码并对密码进行两次加密处理(纯前端),下次登录自动输入账号密码
2、登录时不勾选,清空cookie,下次登录需要输入

效果图:
Vue+element+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 大家记得去下载Vue+element+cookie实现记住密码功能

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()
},

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Vue+element+cookie实现记住密码功能

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Vue+element+cookie实现记住密码功能
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏