vue3实现记住密码功能_vue3 记住密码

思路：

        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
  }
}