实现功能:
- 记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内
- 不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入
大致思路,通过对cookie的存、取、删来实现记住密码与否;选中记住密码,在点击登录的时候将用户名密码存入cookie,每次进入登录页面的时候先读取cookie,如果浏览器的cookie中有账号密码则自动填入登录框,效果图如下:
直接上代码
HTML 部分:
<template>
<div class="login">
<van-form>
<van-field
:colon='true'
:scroll-to-error='true'
v-model='loginData.username'
name='用户名'
label='用户名'
placeholder='请输入用户名'
:rules='[{ required: true, message: "请填写用户名" }]'
></van-field>
<van-field
:scroll-to-error='true'
v-model='loginData.password'
type='password'
name='密码'
label='密码'
placeholder='请输入密码'
:rules='[{ required: true, message: "请填写密码" }]'
></van-field>
<van-checkbox v-model="checkbox" shape="square" class="checkBox">记住密码</van-checkbox>
<div style='margin: 16px;'>
<van-button round block type='info' native-type='submit' @click="login()">提交</van-button>
</div>
</van-form>
</div>
</template>
JS 部分:
export default {
data () {
return {
loginData: {
username: '',
password: ''
},
checkbox: true
}
},
mounted () {
// 页面加载获取cookie
this.getCookie()
},
methods: {
async login () {
let _this = this
const {data: res} = await _this.$http.post('login', _this.loginData)
console.log('============', res)
if (res.meta.status === 200) {
window.sessionStorage.setItem('logintoken', res.data.token)
_this.$router.push('/index')
if (_this.checkbox === true) { // 选中记住密码,将用户名密码存入cookie
_this.setCookie(_this.loginData.username, _this.loginData.password, 7)
} else {
_this.clearCookie() // 清除cookie
}
this.$toast(res.meta.msg) // 登录成功提示
} else {
this.$toast(res.meta.msg) // 登录失败提示
}
},
// 设置cookie
setCookie (cname, cpwd, exdays) {
var d = new Date()
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
var expires = 'expires=' + d.toGMTString()
document.cookie = 'username' + '=' + cname + ';' + expires
document.cookie = 'password' + '=' + cpwd + ';' + expires
},
// 获取cookie
getCookie () {
if (document.cookie.length > 0) {
var arr = document.cookie.split(';') // 这里显示的格式需要切割一下自己可输出看下
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=') // 再次切割
// 判断查找相对应的值 将cookie中的值填入页面
debugger
if (arr2[0].trim() === 'username') {
this.loginData.username = arr2[1]
} else if (arr2[0].trim() === 'password') {
this.loginData.password = arr2[1]
}
}
}
},
// 清除cookie
clearCookie () {
this.setCookie('', '', -1)
}
}
}