思路:
1. 判断记住密码的复选框是否勾选
2. 如果勾选了,需要将用户名和密码存入本地(一般存在cookie中 需要使用Base64进行加密)
3. 在onMounted中查询cookie中是否有用户名密码(使用Base64解密),将解密出的数据赋值给form中的数据即可
实现
<!-- 记住密码 -->
<el-form-item class="isChecked">
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked" class="remeberPwd">
记住密码
</el-checkbox>
</el-form-item>
重点
import { Base64 } from 'js-base64'
import Cookies from 'js-cookie'
// 转码
const { username, password } = loginForm
const params = {
username: Base64.encode(username),
password: Base64.encode(password),
}
// 检测是否需要记住密码 checked就是记住密码绑定的值
if (checked.value) {
const { username, password } = params
const localForm = {
username,
password,
}
Cookies.set('LOCAL_KEY', JSON.stringify(localForm))
} else {
Cookies.remove('LOCAL_KEY')
}
//查询本地是否存了用户名密码 此处写在OnMounted即可
const queryLocalForm = () => {
const localForm = Cookies.get('LOCAL_KEY')
if (localForm) {
checked.value = true
try {
const { username, password } = JSON.parse(localForm)
loginForm.username = Base64.decode(username)
loginForm.password = Base64.decode(password)
} catch (error) {
console.error('本地数据解析失败~', error)
}
} else {
checked.value = false
}
}