VUE记住账号密码功能

Cookie来实现记住密码功能（js-cookie）,使用jsencrypt对密码进行加密解密：

第一步：

yarn add js-cookie//保存cookieyarn add jsencrypt//加解密

第二步：jsencrypt.js
密钥对生成 web.chacuo.net/netrsakeypa…

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
const publicKey = ``
const privateKey = ``

// 加密
export function encrypt(txt:string) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

// 解密
export function decrypt(txt:string) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

第三步：

<template>  <div class="login">    <header>      <img class="logo" src="../assets/images/ic_logo.png" />    </header>    <main>      <h1>企业账号管理后台</h1>      <el-form :model="form" class="login-box">        <el-form-item label="">          <el-input            v-model="form.phone"            placeholder="请输入手机号"            class="input-phone"          />        </el-form-item>        <el-form-item label="">          <el-input            type="password"            show-password            v-model="form.password"            placeholder="请输入密码"            class="input-password"          />        </el-form-item>        <el-form-item label="">          <el-checkbox v-model="form.remember" label="记住密码" />        </el-form-item>        <el-form-item>          <el-button type="primary" @click="onSubmit" class="btn-login"            >登录</el-button          >        </el-form-item>      </el-form>    </main>    <footer>      建议您使用IE9+、FireFox、Google      Chrome、分辨率1366*768及以上浏览网站，获取更好的用户体验    </footer>  </div></template><script lang="ts" setup>import { reactive } from "vue";import { ElMessage } from "element-plus";import { useRouter } from "vue-router";import { checkPhoneNumber } from "../utils/PhoneNumber";import { userInfo } from "../store/user.js";import axios from "../utils/request";import Cookies from "js-cookie";import { encrypt, decrypt } from "../utils/jsencrypt";const router = useRouter();const form = reactive({  phone: "",  password: "",  remember: true, //默认记住账号密码});const store = userInfo();//提交按钮const onSubmit = () => {  const flag = checkPhoneNumber(form.phone);  if (!flag) {    ElMessage({      message: "请输入正确的手机号",      type: "error",      offset: 280,    });  } else if (form.password.length <= 0) {    ElMessage({      message: "密码不能为空",      type: "error",      offset: 280,    });  } else {    axios      .post("/Login/Login", {        MobilePhone: form.phone,        LoginPassword: form.password,      })      .then((response) => {        if (response.data.Code == 100) {          //成功的话：          //状态为已登录，          //保存账号          store.isLogin = true;          store.userInfo.account = form.phone;          ElMessage({            message: "登录成功",            type: "success",            plain: true,          });          //跳转页面          router.push({            name: "account",          });          //选择"记住密码",保住账号密码7天          //未选"记住密码"，删除cookie中的账号密码          if (form.remember) {            Cookies.set("phone", form.phone, { expires: 7 }); //设置有效期为7天            Cookies.set("password", encrypt(form.password), { expires: 7 });          } else {            Cookies.remove("phone");            Cookies.remove("password");          }        } else {          ElMessage({            message: response.data.ErrMsg,            type: "error",            offset: 280,          });        }      })      .catch((error) => {        console.log(error);      });  }};//拿到cookieconst getCookie = () => {  let cphone = Cookies.get("phone");  let cpassword = Cookies.get("password");  form.phone = cphone === undefined ? form.phone : cphone;  form.password = cpassword === undefined ? form.password : decrypt(cpassword);};getCookie();</script>