Vue登录数据密码加密jsencrypt.js传值后台（踩坑，填坑）

登录页密码加密传值后台

1.我用的是vscode编写的代码，打开终端npm安装jsencrypt

npm install jsencrypt --dep

2.在utils文件夹下新建了rsaEncrypt.js文件用来存放密钥export暴露使用

import JSEncrypt from "jsencrypt/bin/jsencrypt";

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

const publicKey =
  "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n" +
  "2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ==";

const privateKey =
  "MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n" +
  "mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n" +
  "B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n" +
  "/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n" +
  "UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n" +
  "vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n" +
  "4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n" +
  "tTbklZkD2A==";

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

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt();
  encryptor.setPrivateKey(privateKey);
  return encryptor.decrypt(txt);
}

3.在登录页面import引入

import { encrypt } from "@utils/rsaEncrypt";

4.在下面调用对密码进行加密的时候发现传到后台的值并不是加密后的数据，踩了一个小小的坑（Vue中var、let和const的区别与使用，let是变量，const是常量不可更改），所以我定义了一个新的变量去存储传值后台。

      const { account, password } = this;
      let password2 = this.password;//定义一个变量password2用来存储加密改变后的值
      try {
       //中间这一段的代码太长了就给省略了，主要是对账户和密码进行登录校验
        }).validate({ account, password });
        password2 = encrypt(password2);//调用对密码进行加密
        //alert(password2);
      } catch (e) {
        return validatorDefaultCatch(e);
      }
       login({ username: account, password: password2, spread: cookie.get("spread") })//这里就把password2加密后的值传给后台了
       //后面一大段获取地址登录成功的代码也省略了