<div>
<input id="adviceCheck" type="checkBox" name="adviceCheck" :checked="pasChecked" @click="changeChecked" />
<label for="adviceCheck" class="advice">下次自动登录</label>
</div>
<el-button type="primary" :loading="logining" @click="login('loginForm')">登录</el-button>
import tokenUtils from '../../utils/cookieToken'
data() {
return {
ruleForm: {
account: '',
password: ''
},
pasChecked: false
}
},
mounted() {
tokenUtils.getCookie(this.ruleForm.account, this.ruleForm.password)
},
methods: {
changeChecked() {
this.pasChecked = !this.pasChecked
},
loginYz(form) {
this.$refs[form].validate(valid => {
if (valid) {
// 保存的账号
const name = this.ruleForm.account
// 保存的密码
const pass = this.ruleForm.password
// 判断复选框是否被勾选 勾选则调用配置cookie方法
if (this.pasChecked == true) {
// 传入账号名,密码,和保存天数3个参数
tokenUtils.setCookie(name, pass, 7)
} else {
tokenUtils.clearCookie()
}
// this._login()
} else {
return
}
})
},
}
utils/cookieToken文件
export default {
// 设置cookie
setCookie(c_name, c_pwd, exdays) {
const exdate = new Date()// 获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 保存的天数
// 字符串拼接cookie
const expires = 'expires=' + exdate.toUTCString()
window.document.cookie = 'userName=' + c_name + ';path=/;' + expires
window.document.cookie = 'userPwd=' + c_pwd + ';path=/;' + expires
},
// 读取cookie
getCookie(userName, password) {
if (document.cookie.length > 0) {
const arr = document.cookie.split('; ')// 这里显示的格式需要切割一下自己可输出看下
for (let i = 0; i < arr.length; i++) {
const arr2 = arr[i].split('=')// 再次切割
// 判断查找相对应的值
if (arr2[0] === 'userName') {
userName = arr2[1]// 保存到保存数据的地方
} else if (arr2[0] === 'userPwd') {
password = arr2[1]
}
}
}
},
或
// 读取cookie
getCookie(key) {
if (document.cookie.length > 0) {
const arr = document.cookie.split('; ')// 这里显示的格式需要切割一下自己可输出看下
for (let i = 0; i < arr.length; i++) {
const arr2 = arr[i].split('=')// 再次切割
// 判断查找相对应的值
if (arr2[0] === key) {
return arr2[1]// 保存到保存数据的地方
}
}
}
},
// 清除cookie
clearCookie: function() {
this.setCookie('', '', -1)// 修改2值都为空,天数为负1天就好了
}
}
点击下次自动登录,再点击登录时,会保存用户名及密码(7天)