Vue-RSA 非对称加密传输，万千方法取其一

用 jsencrypt.js  官网travistidwell.com/jsencrypt/

npm install jsencrypt

装好后在vue文件里引用

import JSEncrypt from 'jsencrypt/bin/jsencrypt'

实际开发过程中，后台生成一对公私钥，私钥存在服务器，把公钥给前端，前端加密后传给后端，这是相对比较安全的做法。

首先，你得有一对公钥和私钥，有在线生成器，我们先来一对  web.chacuo.net/netrsakeypa…

通过上图，我们分别生成了公钥 & 私钥，保存好就开始进行接下来的封装了, 先创建一个文件夹用来存放RsaKey.js文件

// 引入JSEncrypt文件
import JSEncrypt from "jsencrypt/bin/jsencrypt";

//公钥
let publicKey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDOwaw9yr1ycdC+dxAQx99sdFWo
YMGlmY3dEYHVtHWGnBv0YYgGLHB0FCTLPcQKOvEx1WrQjWQlEaFYoUAYlkwbXoCa
/SZlyTwTTR1OC6tEZXSiu9qXA0BzthXCXv8qUIiulAH8BMwTxKEGepimMoDbMiDQ
2AYSdLT/oB/i3mmgPQIDAQAB`;

//私钥
let privateKey = `
MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAM7BrD3KvXJx0L53
EBDH32x0VahgwaWZjd0RgdW0dYacG/RhiAYscHQUJMs9xAo68THVatCNZCURoVih
QBiWTBtegJr9JmXJPBNNHU4Lq0RldKK72pcDQHO2FcJe/ypQiK6UAfwEzBPEoQZ6
mKYygNsyINDYBhJ0tP+gH+LeaaA9AgMBAAECgYBxdAEJ30hZlm7PNRJRwvuszaF7
Ray9LCeWWVb/Z4jeFqeYUDSN/rCuYadXB0uduX5EtDFqw0tis+vvcHx1gXO8y8uV
HPb+2oh8K5B6CzlCukGJUdLNqbFNfEatO4fHU6YEK2/a5ZCFtBOmqSIDVwz2zIEs
gmdx2hivoKm6aSioQQJBAPfeYSAU3+w6BWHfdujS9l+x2FMik+UySl8l37kxmDJZ
nWMtQlHLcXOOfCsxJ170Zq9lD2OuHYmohB/AzPiDz4kCQQDVigfNLcyj2aTgSdwB
5AIVnouvLZZIyeZT7ozwHUAk1lsr4E/oBrCp3++S+9R4V7iussAiJvqPM08zI5Dx
vEoVAkBKK85OhlCXZKlVp0Py2aYF7rb38aHl9M2SeUfgJ/oOHwjcs59j0IgLdziq
yBOq82GC3K/lOSX3mminA8+SEgdZAkEAvCxeo5hwdRMeD+gGUEQ08gg836o0fQAu
UFgvKokcNVoQDaIlyDndBFWqMMRqf4IN5STv2yiuM/LrIA1/dQaP4QJBAKBV88L+
pvchxjUz7tJ/XrnENsWjj9rfRfeyqxLKBWGE66MaGUPf7g95cF/ZZ8CFr5Sj8znM
jj7EU9yY0TUQogo=
`;

// 加密方法
let RSAencrypt = (pas) => {
  // 实例化jsEncrypt对象

  let encryptor = new JSEncrypt();

  // 设置公钥

  encryptor.setPublicKey(publicKey);

  return encryptor.encrypt(pas);
};

//解密方法
let RSAdencrypt = (pas) => {
  //实例化jsEncrypt对象

  let decrypt = new JSEncrypt();

  //设置私钥

  decrypt.setPrivateKey(privateKey);

  return decrypt.decrypt(pas);
};

// 进行抛出 注意这里是抛出 而非默认抛出
export { RSAencrypt, RSAdencrypt };

封装好之后开始加密 & 解密

<script>
// 然后引入我们封装好的 Rsa 非对称加密文件
import { RSAencrypt, RSAdencrypt } from "@/api/GetRsaKey/GetRsaKey";

export default {
  created() {
    // 页面创建后 -> 刷新页面后获取解密的数据 
    // 这里的JSON.parse是解析成对象 原因如 👇
    console.log(JSON.parse(RSAdencrypt(this.key)))  // { a:1,b:2,c:就是玩~ }
  },
  methods: {
    submitForm() {
         // 这里的JSON.stringify是因为发现对象传进去变成了空 所以转成了string类型
         RSAencrypt(JSON.stringify({ a:1,b:2,c:就是玩~ })) // 对需要加密的数据进行加密
    },
  },
};
</script>