实现思路:
- 完成选择框的双向绑定 得到一个true或者false的选中状态
- 如果当前为true,点击登录时,表示要记住,把当前的用户名和密码存入本地
- 组件初始化的时候,从本地取账号和密码,把账号密码存入用来双向绑定的form身上
- 如果当前用户没有记住,状态为false,点击登录的时候要把之前的数据清空
代码如下:
// vue页面内容如下
<el-form ref="form" :model="loginForm" :rules="rules">
<el-form-item label="账号" prop="username">
<el-input v-model="loginForm.username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" />
</el-form-item>
<el-form-item prop="remember">
<el-checkbox v-model="rememberMe">记住我</el-checkbox>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="login_btn"
@click="loginBtn"
>登录</el-button>
</el-form-item>
</el-form>
// vue页面的js内容如下
created() {
const login_form = localStorage.getItem('form_key')
if (login_form) {
const { username, password } = JSON.parse(login_form)
this.loginForm.username = username
this.loginForm.password = password
}
},
methods: {
loginBtn () {
this.$refs.form.validate(async (flag) => {
if (!flag) return
try {
// 判断是否选择记住我
if (this.rememberMe) {
localStorage.setItem('form_key', JSON.stringify(this.loginForm))
} else {
localStorage.removeItem('form_key')
}
this.$router.push('/')
} catch (err) {
this.$message.error(err.response.data.msg)
}
})
}
}