vue使用cookie实现记住密码功能
1、样式结合elementui
<el-form :model="usermsg" ref="usermsg">
<el-form-item prop="user" :rules="[{ required: true, message: '用户名不能为空'}]">
<el-input prefix-icon="iconfont icon-yonghu"
type="text"
v-model.user.trim="usermsg.user"
placeholder="用户名"
>
</el-input>
</el-form-item>
<el-form-item prop="psw" :rules="[{ required: true, message: '密码不能为空'}]">
<el-input prefix-icon="iconfont icon-mima"
type="password"
ref="pw"
v-model.psw.trim="usermsg.psw"
placeholder="密码"
>
</el-input>
</el-form-item>
<el-form-item style="text-align: right">
<el-checkbox v-model="isRemember">
记住密码
</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
2、实现思路
1)进入登录页面首先查看cookie中是否存储用户名、密码,如果有,将cookie中的用户名和密码绑定到form表单中,如果没有则将用户输入的用户名和密码存入cookie
2)设置记住密码就是在1)的基础上,在cookie中存一个标识
data() {
return {
usermsg: {
user: '',
psw: '',
},
isRemember: false//默认不记住密码
};
},
mounted(){
this.getCookie(); //首先判断cookie中的值
},
created(){
//设置点击回车键直接登录
document.onkeydown = (e)=>{
var e = event || window.event;
if(e && e.keyCode == 13){
this.getLogin();
}
}
},
methods: {
getCookie(){
if(document.cookie.length>0){
var arr = document.cookie.split(";");
for(var i = 0;i<arr.length; i++){
var userKey = arr[i].split("=");
if(userKey[0].trim() == "userName"){
this.usermsg.user = userKey[1];
}else if(userKey[0].trim() == "userPws"){
this.usermsg.psw = userKey[1];
}else if(userKey[0].trim() == "isRemember"){
this.isRemember = Boolean(userKey[1]);
}
}
}
},
//存储
setCookie(userName,userPws,days){
var curDate = new Date();
curDate.setTime(curDate.getTime() + 24*60*60*1000*days); //设置cookie存储的有效时间
window.document.cookie = "userName" + "=" + userName + ";path=/;expires=" + curDate.toGMTString();
window.document.cookie = "userPws" + "=" + userPws + ";path=/;expires=" + curDate.toGMTString();
window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + curDate.toGMTString();
},
//如果用户不选择记住密码清除cookie
clearCookie(){
this.setCookie("","",-1);
},
submitForm() {
//登录时判断是否选择记住密码,如果是则设置cookie不是清除cookie,然后再调用登录函数进行登录
if(this.isRemember == true){
this.setCookie(this.usermsg.user,this.usermsg.psw,7)
}else{
this.clearCookie();
}
this.getLogin(); //调用登录函数
},