代码
<el-form-item prop="password">
<el-input
v-model.trim="ruleForm.password"
placeholder="密码"
:type="showPass ? '' : 'password'"
type="password"
>
<template #suffix>
<img
v-if="showPass"
alt=""
class="pass-icon"
src="@/assets/login/open_eye.png"
@click="showPass = !showPass"
/>
<img
v-else
alt=""
class="pass-icon"
src="@/assets/login/close_eye.png"
@click="showPass = !showPass"
/>
</template>
</el-input>
</el-form-item>
<el-form-item prop="type">
<el-checkbox
v-model="checkedPsd"
label="记住密码"
size="large"
class="right_tips"
/>
</el-form-item>
记住密码 (通过base64对密码进行加密)
安装Base64 加解密
npm install --save js-base64当前文件中引入
import { Base64 } from 'js-base64';
const showPass = ref(false); // 是否显示密码
const checkedPsd = ref(false); // 是否选中记住密码
const ruleForm = reactive({
name: '',
password: '',
});
const rules = reactive<FormRules>({
name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});
onMounted(() => {
let username = localStorage.getItem('name');
if (username) {
ruleForm.name = localStorage.getItem('name');
ruleForm.password = Base64.decode(localStorage.getItem('password')); // base64解密
checkedPsd.value = true;
}
});
// 登录
const submitForm = () => {
ruleFormRef.value.validate((valid: boolean) => {
if (valid) {
// 是否记住密码
if (checkedPsd.value) {
let password = Base64.encode(ruleForm.password); // base64加密
localStorage.setItem('name', ruleForm.name);
localStorage.setItem('password', password);
} else {
localStorage.removeItem('name');
localStorage.removeItem('password');
}
// 请求接口。。。。。。
} else {
console.log('error submit!');
}
});
}