原文:Vue3 + Ts的记住密码实现_小小前端程序猿的博客-CSDN博客
view界面
<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="loginForm demo-ruleForm">
<!-- 账号 -->
<el-form-item label="账号" prop="userCode" autocomplete="on">
<el-input v-model="loginForm.userCode" placeholder="请输入账号"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item label="密码" prop="userPassword">
<el-input type="password" v-model="loginForm.userPassword" placeholder="请输入密码" @keyup.enter="submitForm('loginForm')"></el-input>
</el-form-item>
<div class="tip">
<!-- 记住我 -->
<el-checkbox v-model="loginForm.checked" class="rememberMe">记住我</el-checkbox>
<!-- 找回密码 -->
<el-button type="text" @click="open()" class="forgetPw">忘记密码?</el-button>
</div>
<!-- 登录 -->
<el-form-item>
<el-button type="primary" @click="login" class="submit-btn">登录</el-button>
</el-form-item>
</el-form>
密码加密
通过base64对密码进行加密
//安装
npm install --save js-base64
//在运用页面引入
import { Base64 } from 'js-base64' //引入base64加密,用于记住密码
登录行为
let loginForm = ref({
userCode:'',
userPassword:'',
checked:[]
})
//在setup中,用来加载页面时,查看账户密码是否存在
function hasUserCodeOrPassword() {
if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
loginForm.userCode = localStorage.getItem('userCode')
loginForm .userPassword = Base64.decode(localStorage.getItem('userPassword'))//解密
loginForm.checked.push(true)
}
}
hasUserCodeOrPassword() //调用函数
//登录行为
async function login() {
let isChecked = loginForm.checked?.length == 1 ? true : false
//判断是否点击记住密码
if (isChecked) {
localStorage.setItem('userCode', formLabelAlign.formData.userCode)
localStorage.setItem(
'userPassword',
Base64.encode(formLabelAlign.formData.userPassword), //base加密
)
} else {
localStorage.removeItem('userCode')
localStorage.removeItem('userPassword')
}
ElMessage.success('操作成功')
}