Vue实现登录时记住密码7天的功能
1、所需要用到的方法
localStorage.setItem(key, value) 用于进行本地的持久化储存
Date.now() 它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数
localStorage.getItem(key) 用于进行本地储存数据进行读取
JSON.stringify() 将 对象 格式数据转换成 JSON 格式
JSON.parse() 将 JSON 格式数据转换成 对象 格式
2、代码
HTML 部分
<div class="login">
<div class="login-min">
<el-form label-width="80px" :model="userInfo" ref="loginForm" :rules="loginRules">
<el-form-item style="text-align: center">
<h1>X X X X OA系统</h1>
</el-form-item>
<el-form-item label="账号:" prop="userName">
<el-input v-model="userInfo.userName" placeholder="请输入账号" autofocus="true"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="userPassword">
<el-input placeholder="请输入密码" v-model="userInfo.userPassword" show-password keyup.enter.native="loginBut"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="keepPassword">记住密码</el-checkbox>
</el-form-item>
<el-form-item>
<el-button :loading="loading" type="primary" @click="loginBut">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
VUE部分
data 中的值
data() {
/*
* validator 表单自定义验证的函数
* 三个参数 rule, value, callback
* rule 是个对象,里面具备的 key 有 field、fullField、required、type
* value 表单的值
* callback 回调函数
* */
const validateName = (rule, value, callback) => {
if(value.length < 1) {
callback(new Error('请输入用户名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if(value.length < 1) {
callback(new Error('请输入密码'))
} else if(value.length < 6) {
callback(new Error('密码字符不得小于6个字符'))
} else {
callback()
}
}
return {
userInfo: {
userName: '',
userPassword: ''
},
loginRules: {
userName: [
{ trigger: 'blur', validator: validateName }
],
userPassword: [
{ trigger: 'blur', validator: validatePassword }
]
},
keepPassword: false,
loading: false
}
}
mounted 和 methods 部分的代码
mounted() {
this.getLocalStorageUserInfo()
},
methods: {
loginBut() {
this.$refs.loginForm.validate(valid => {
if(valid) {
this.loading = true
const userInfo = {
userName: 'Mr.Q',
userPassword: '123456'
}
console.log(this.userInfo.userName === userInfo.userName)
if(this.userInfo.userName === userInfo.userName && this.userInfo.userPassword === userInfo.userPassword) {
this.$router.push({ path: '/home'})
if (this.keepPassword) {
const storageTime = 7 * 24 * 60 * 60 * 1000
const userInfo = { userName: this.userInfo.userName, userPassword: this.userInfo.userPassword }
localStorage.setItem('userInfo', JSON.stringify({
time: Date.now() + storageTime,
data: userInfo
}))
}
this.loading = false
} else if (this.userInfo.userName !== userInfo.userName && this.userInfo.userPassword !== userInfo.userPassword) {
this.$message({
message: '用户账号密码错误',
type: 'error'
})
this.loading = false
} else if(this.userInfo.userName !== userInfo.userName) {
this.$message({
message: '用户信息不存在',
type: 'warning'
})
this.loading = false
} else if(this.userInfo.userPassword !== userInfo.userPassword) {
this.$message({
message: '用户密码错误',
type: 'error'
})
this.loading = false
}
} else {
this.loading = false
return false
}
})
},
// 检索内部是否有用户名和密码
getLocalStorageUserInfo() {
if (!localStorage.getItem('userInfo')) {
console.log('用户信息不存在')
} else {
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
if (userInfo.time < Date.now()) {
this.$message({
message: '用户信息已失效,请重新登录',
type: 'warning'
})
} else {
this.userInfo.userName = userInfo.data.userName
this.userInfo.userPasswordr = userInfo.data.userPassword
}
}
}
}
css 部分的样式
.login {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #2c3e50;
.login-min {
width: 50vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
.el-form {
width: 25vw;
.el-form-item {
color: #fff;
text-align: left;
// ::v-deep 样式穿透
::v-deep .el-form-item__label {
color: #fff;
}
.el-checkbox {
color: #fff;
}
.el-button {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 80%;
}
}
}
}
}