若依 Vue3 前端分离 3.8.8 版集成 jsencrypt 实现密码加密传输方式补充记住密码失效-CSDN博客

感谢@疯狂的格式化博主提供的若依 Vue3 前端分离 3.8.8 版集成 jsencrypt 实现密码加密传输方式方法在看这个方法之前先需要按疯狂的格式化博主写的那个方法来修改密码加密传输方式然后我在这里做了一些小补充也欢迎大家继续提供更好的解决方法

1. 修改完之后前端控制台会报错

报错示例：

    jsencrypt.js:20 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'publicKey')
        at encrypt (jsencrypt.js:20:37)
        at login.vue:163:33
        at validateField (element-plus.js?v=ca66df1e:14253:46)

解决办法：

找到\src\views下login.vue第111行将encrypt（）去掉即可

if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", loginForm.value.password, { expires: 30 });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }

这样会带来一个问题，记住密码会不管用，所以继续处理记住密码的问题。。。

记住密码功能加密保存密码

记住密码可以用之前的逻辑找到src\utils下的jsencrypt.js，修改如下：

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

// 密钥对生成 http://web.chacuo.net/netrsakeypair

const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
    'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='

const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
    '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
    'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
    'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
    'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
    'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
    'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
    'UP8iWi1Qw0Y='

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

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

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

继续修改\src\views下login.vue下的handleLogin()方法中的代码：

if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encryptWithPublicKey(loginForm.value.password), { expires: 30 });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }

修改同文件下面的getCookie()方法：

function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decryptWithPrivateKey(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  };
}