vue3:八、登录界面实现-忘记密码

一、页面效果

二、实现

1、视图层

<el-form-item class="flex flex-between"><el-checkbox label="记住密码" v-model="remember" />
</el-form-item>

参考

Checkbox 多选框 | Element Plus

2、逻辑层

首先设置记住密码的变量，默认值为否。

勾选后，在执行登录成功后，将记住的账号密码存入缓存。（密码的存取需要用到密码加密与解密）

如果记住密码，进入登录页面将账号密码自动显示到账号框和密码框，并且勾选记住密码

①设置变量

const remember = ref(false)

②封装解密加密方法

安装crypto-js 库

npm install crypto-js

这里使用AES（Advanced Encryption Standard）​ 加密算法

建立页面src/utils/encrypt.js

// 引入方法
import CryptoJS from 'crypto-js';// 加密密钥（建议存储在环境变量中）
const SECRET_KEY = 'cmskey-QWERTYUIOPASDFGHJKLZXCVBNM';// 加密函数
export function encryptData(data) {return CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();
}// 解密函数
export function decryptData(encryptedData) {const bytes = CryptoJS.AES.decrypt(encryptedData, SECRET_KEY);return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}

③封装记住密码的本地存储管理

建立页面src/utils/logininfo.js

• 存入缓存：正常传递的参数是一个对象{username:'',password:''},先对密码进行加密，然后转换为字符串进行存入缓存
• 取出缓存：首先从缓存中获取，获取之后需要将字符串转换为对象，然后将加密的密码进行解密，将设置的新对象进行返回。如果没获取到，清除之前存储的数据
• 删除缓存：根据名称清除记住密码的缓存

//引入加密和解密方法
import { encryptData,decryptData } from '@/utils/encrypt'; 
//设置变量
const rememberMeKey = 'rememberMe';//将需要记住的账号密码存入本地缓存
export function setLoginInfo(loginInfo) {//密码加密loginInfo.password = encryptData(loginInfo.password);//将对象转换为字符串loginInfo = JSON.stringify(loginInfo);//设置到本地缓存localStorage.setItem(rememberMeKey, loginInfo);
}//获取账号密码
export function getLoginInfo() {//获取账号密码const loginInfo = localStorage.getItem(rememberMeKey);//判断是否为空if (loginInfo) {//不为空,返回账号密码//转换为对象const LoginBase = JSON.parse(loginInfo);//对密码进行解密LoginBase.password = decryptData(LoginBase.password);return LoginBase;}else{//如果没有账号密码，清空之前存的，也就是返回空removeLoginInfo();}
}
//删除记住的账号密码
export function removeLoginInfo() {localStorage.removeItem(rememberMeKey);
}

④登录成功后，将记住的密码存入缓存

//勾选了记住密码
if(remember){setLoginInfo({username: ruleForm.username,password: ruleForm.password});
}
else{removeLoginInfo();
}

⑤ 记住密码的默认设置

//获取记住密码的数据
const rememberInfo = getLoginInfo();
if(remember){//将账号密码设置到页面，并勾选多选框ruleForm.username = rememberInfo.username;ruleForm.username = rememberInfo.username;remember.value = true;
}

三、测试效果

登录前记录缓存-没有账号密码信息

登录成功后，查询本地缓存

成功进入页面，查看是否记录到页面

取消勾选，查看缓存是否清空

发现已经清空缓存

重新进入登录页面，查看页面信息是否清除

四、完整代码

1、登录页面

LoginView.vue

<template><div class="page_all flex flex-center"><div class="login_all flex flex-between"><div class="login_left flex flex-center"><img src="/svg/login.png"></div><div class="login_right flex flex-center flex-column"><div class="form flex flex-center flex-column"><div class="title flex flex-center">CMS管理系统</div><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="el-form demo-ruleForm":size="formSize" status-icon><el-form-item prop="username"><el-input v-model="ruleForm.username" placeholder="请输入账号" /></el-form-item><el-form-item prop="password"><el-input v-model="ruleForm.password" show-password placeholder="请输入密码" /></el-form-item><el-form-item class="flex flex-between"><el-checkbox label="记住密码" v-model="remember" /></el-form-item><el-form-item class="btn-group"><el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button><el-button @click="resetForm(ruleFormRef)">重置</el-button></el-form-item></el-form></div></div></div></div> 
</template>
<script setup>
//引入方法
import { reactive, ref } from 'vue' //引入vue响应式
import { login } from '@/api/logininfo' //引入登录接口
import { useRouter } from 'vue-router'  //引入路由
import { ElMessage } from 'element-plus' //引入提示框
import { setToken } from '@/utils/token' //引入token设置
import { getLoginInfo, removeLoginInfo, setLoginInfo } from '@/utils/logininfo'//设置表单大小
const formSize = ref('default')
//设置表单数据
const ruleFormRef = ref()
const ruleForm = reactive({username: '',password: '',
})
//设置路由
const router = useRouter();//设置验证规则
const rules = reactive({username: [{ required: true, message: '请输入账号', trigger: 'blur' },{ min: 3, max: 10, message: '长度请在3-10之间', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 20, message: '长度请在6-20之间', trigger: 'blur' },{validator: (rule, value, callback) => {const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/;if (!passwordPattern.test(value)) {callback(new Error('密码必须包含大写字母、小写字母、数字和特殊字符'));} else {callback();}}, trigger: 'blur'},// 或者// {pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/, message: '密码必须包含大写字母、小写字母、数字和特殊字符', trigger: 'blur'}],
})
//设置记住密码
const remember = ref(false)
//获取记住密码的数据
const rememberInfo = getLoginInfo();
if(remember){//将账号密码设置到页面，并勾选多选框ruleForm.username = rememberInfo.username;ruleForm.username = rememberInfo.username;remember.value = true;
}
//表单提交
const submitForm = async (formEl) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!');// 1、请求登录接口进行登录// 参数为ruleFormconsole.log(ruleForm)// 2、请求登录接口进行登录login( ruleForm ).then(res => {console.log('res:', res)if (res.code == 1) {// 3、提示成功信息ElMessage.success(res.msg || '登录成功')//记住密码勾选if(remember){setLoginInfo({username: ruleForm.username,password: ruleForm.password});}else{removeLoginInfo();}//存入该账号的tokensetToken(res.data.token)// 4、跳转页面router.push('/')}else {ElMessage.error(res.msg || '登录失败')}})} else {console.log('error submit!', fields)}})
}
//重置表单
const resetForm = (formEl) => {if (!formEl) returnformEl.resetFields()
}</script>
<style>
.page_all {width: 100%;height: 100vh;background-color: #808cdd;
}.login_all {width: 50%;height: 60%;background-color: white;
}.login_left {width: 50%;height: 98%;
}.login_left img {width: 95%;height: 80%;object-fit: contain;
}.login_right {width: 50%;height: 100%;
}.title {font-size: 25px;color: #646cff;letter-spacing: 3px;height: 20%;
}.form {flex: 1;width: 90%;
}.el-form {width: 60%;
}.el-input__inner {font-size: 12px;
}.btn-group {width: 100%;margin-top: 30px;
}.btn-group button {width: 45%;
}.el-form-item__content {justify-content: space-between;
}
</style>

2、记住密码的本地存储管理

src/utils/logininfo

import { encryptData,decryptData } from '@/utils/encrypt'; 
//设置变量
const rememberMeKey = 'rememberMe';//将需要记住的账号密码存入本地缓存
export function setLoginInfo(loginInfo) {//密码加密loginInfo.password = encryptData(loginInfo.password);//将对象转换为字符串loginInfo = JSON.stringify(loginInfo);//设置到本地缓存localStorage.setItem(rememberMeKey, loginInfo);
}//获取账号密码
export function getLoginInfo() {//获取账号密码const loginInfo = localStorage.getItem(rememberMeKey);//判断是否为空if (loginInfo) {//不为空,返回账号密码//转换为对象const LoginBase = JSON.parse(loginInfo);//对密码进行解密LoginBase.password = decryptData(LoginBase.password);return LoginBase;}else{//如果没有账号密码，清空之前存的，也就是返回空removeLoginInfo();}
}export function removeLoginInfo() {localStorage.removeItem(rememberMeKey);
}

3、加密解密

// src/utils/encrypt.js
import CryptoJS from 'crypto-js';// 加密密钥（建议存储在环境变量中）
const SECRET_KEY = 'cmskey-QWERTYUIOPASDFGHJKLZXCVBNM';// 加密函数
export function encryptData(data) {return CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();
}// 解密函数
export function decryptData(encryptedData) {const bytes = CryptoJS.AES.decrypt(encryptedData, SECRET_KEY);return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}