实现思路:
刷新登录页面时查看cookie中是否存储用户名、密码、是否记住密码,如果有就将cookie中的用户名和密码回显到form表单中,如果没有则将用户输入的用户名和密码存入cookie
html代码:(只截取了部分账号密码功能部分代码,主要是记住密码功能)
<el-tab-pane label="账号登录" name="first">
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input
ref="username"
v-model="loginForm.username"
placeholder="账号"
name="username"
type="text"
tabindex="1"
auto-complete="on"
/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="密码"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<el-checkbox v-model="isRemember" style="margin-bottom:10px;">记住密码</el-checkbox>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
</el-tab-pane>
js代码:
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
isRemember: false, // 默认不记住密码
}
},
mounted() {
this.getCookie()// 判断cookie中的值
},
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.loginForm.username = userKey[1]
} else if (userKey[0].trim() === 'userPws') {
this.loginForm.password = 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()
},
handleLogin() {
this.loading = true
// 登录时判断是否选择记住密码,如果是则设置cookie不是清除cookie,然后再调用登录函数进行登录
if (this.isRemember === true) {
this.setCookie(this.loginForm.username, this.loginForm.password, 7)
} else {
this.setCookie('', '', -1)// 清除cookie
}
//后面调登录接口
}
}
}