需求是这样的：要从内部产品，跳到外部链接时，需要将加密后的信息使用get方法的参数带到url上，然后那边接收到后解密
我遇到的问题：密文通过url传输后，密文丢失且错误，导致解密为null
1. 安装
npm i jsencrypt --save
2. 封装加解密文件
公钥和私钥生成方式，可以参考官网：https://www.npmjs.com/package/jsencrypt，在这里我用的是网上找的公钥和私钥，自己开发时，请自行替换
// encrypt.js 加解密的方法
// 这是网上找的测试公钥
const publicKey = `MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgHpl+vwbsumVicyKwLS7430FSo5x
gUaNGAvdoPehz2Kz0/nNb9p3nlY5U3IkQ7flyFg5/n25UXGaNALU4/ud7SlTCSOk
mDqfyJWGJHSDA8rc60B5hwkKkXdoFMYZ/MixbqTFP4es//fco0+BOo/7GCIZjlgi
RgbKZlJrhUPTN4CvAgMBAAE=`;
import JSEncrypt from "jsencrypt";
// 加密
export function setEncryt(msg) {
const jsentrypt = new JSEncrypt();
jsentrypt.setPublicKey(publicKey);
return jsentrypt.encrypt(msg);
}
// 这是网上找的测试用的解密私钥
const privateKey = `MIICWgIBAAKBgHpl+vwbsumVicyKwLS7430FSo5xgUaNGAvdoPehz2Kz0/nNb9p3
nlY5U3IkQ7flyFg5/n25UXGaNALU4/ud7SlTCSOkmDqfyJWGJHSDA8rc60B5hwkK
kXdoFMYZ/MixbqTFP4es//fco0+BOo/7GCIZjlgiRgbKZlJrhUPTN4CvAgMBAAEC
gYB38rLJF9f4g1x8f8mkFLE2VtYey+s1mZXkIvjZVNBo2PQ2TPZ9sVYRB7LYG+Pl
NyFkHMliqha/bq/jyn/1mGnN+zYObiloea+djwfYxClBE5RlpMbKDWNLVhA+TIdf
itMaNtVxBS+Uxben5zLjS/lNb6MghPfKsqNpLu8mOTKVIQJBAOc0zTr74GrR1irS
obnh5p4wmtjtK1vvQCqZRZynzM4GjFjA46oBLwERrmg1rwuwYqqk5a8a+UMnAwIy
LapYknECQQCHhiA9+xSu1MACAgtvOnbYp3AH9LkkVJsRWewp+Gi7nKiQuIB4WzMq
sGH331c0NX+xjivclZZv8NjFaVb2YpUfAkBQ33taQniBZNzRJdREPOx6MO45Ktyb
z9hWDj73SQqulkPJV89KzBcw/IpREVYldJFOt1dQJNND1gWLYxnuGAVBAkBDUxk/
UTUUKTJ9jOB7UBLsTDm2ahdzeehS9VYB/5qf4RJIWq/PmpbPlTIF/liG4jDeVt9p
RJKoZ4B4iX0fBxhHAkAYmuzegom74e41u8tB1pAvfGiz8btZhzfdaU0tVSMJ4gi2
QZMikWSBT+13h+vBtIp9E18viI84lS2TECghHaIW`;
// 解密
export function decrypt(msg) {
let decrypt = new JSEncrypt();
decrypt.setPrivateKey(privateKey);
var decryptMsg = decrypt.decrypt(msg);
return decryptMsg;
}
加密并传递信息
一开始，我是这样做的加密：
import { setEncryt } from "@/utils/encrypt";
sendInfo() {
const url = `https://test.com/param=${setEncryt(text)}`
window.open(
url,
"_self"
);
}
对方解密：
import { decrypt } from "@/utils/encrypt";
// 获取url上的参数信息
let text = query.param;
console.log("解密后:", decrypt(text)); // null
然后，发现对方解密后为null???
于是不信邪的我，开始自己来验证一下里面的坑，自己模拟一下跳内部页面，然后发现：
加密后：DecD7fTpRDk2ygoOWHMiHbecHMdwZoYxGHR04n8iO/CZLFO+A7MGan7riue7Mz9IkwUMIlTbMTaVDMsTJ/hhf/IZOp/eW6l0CkkS+7CQrhiNJsSQrYDew63bYCea3kdchJO417SiP1VncKOrPrQPIxH7vLVleujrXYrxtQ67su0=
解密后就变成了：
DecD7fTpRDk2ygoOWHMiHbecHMdwZoYxGHR04n8iO/CZLFO A7MG...ncKOrPrQPIxH7vLVleujrXYrxtQ67su0=
中间那段被吃了！变成...了，然后+号变成了空格" "，所以解密后就自然为null了
解决方案
- 针对
...问题：发送和接收信息，要经过url编码(encodeURI、decodeUrl) - 针对空格问题，将其替换成
+号后，再进行解密
import { setEncryt } from "@/utils/encrypt";
// 加密过程
sendInfo() {
const text= "13111111111"; // 要加密的信息
let encrytText = setEncryt(phone); // 进行加密
console.log("加密后:", encrytText);
var res = encodeURI(encrytText); // 进行url编码
console.log("urlEncode后", res);
const url = `https://test.com/param=${setEncryt(res)}`
window.open(
url,
"_self"
);
}
import { decrypt } from "@/utils/encrypt";
// 解密过程
getInfo() {
let text = query.param; // 接收到的url编码后的密文
console.log("接收到的密文", text);
const decodeUrl = decodeURI(text); // 进行url解码
console.log("解码后的密文", decodeUrl);
const replaceText = decodeUrl.replace(/\s/g, "+"); // 将密文传递过程丢失的+号，替换回来
console.log("替换后的密文:", replaceText);
console.log("解密后:", decrypt(replaceText)); // 13111111111
}
