html部分
<el-form-item prop="checked" class="login-item">
<el-checkbox class="area" v-model="loginForm.checked">记住密码</el-checkbox>
</el-form-item>
data部分
loginForm: {
username: "",
password: "",
checked: true,
},
methods部分及mounted部分
mounted() {
this.getCookie();
},
methods: {
setCookie(c_name, c_pwd, exdays){
let exdate = new Date();
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
window.document.cookie = "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
getCookie(){
if(document.cookie.length > 0){
let arr = document.cookie.split("; ");//cookie存储格式问题,;后面有一个空格
for(let i = 0; i < arr.length; i ++){
let arr2 = arr[i].split("=");
if(arr2[0] == "username"){
this.loginForm.username = arr2[1];
}
else if(arr2[0] == "password"){
this.loginForm.password = arr2[1];
}
}
}
},
clearCookie(){
this.setCookie("","",-1);
},
submitForm(loginForm) {
this.$refs[loginForm].validate((valid) => {
if (valid) {
const self = this;
if(self.loginForm.checked == true){
self.setCookie(self.loginForm.username, self.loginForm.password, 7);
}
else{
self.clearCookie();
}
//以下为登录逻辑,与记住密码的操作无关。
let userinfo = this.loginForm;
login(userinfo).then((res) => {
let userList = res.user;
setToken("Token", userList.token);
this.$router.push({ path: "/" });
this.$store.dispatch("initLeftMenu"); //设置左边菜单始终为展开状态
});
}
});
},
},