Vue3 + Ts的记住密码实现

Vue3 + Ts的记住密码实现

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('操作成功')
}