core.js:478未捕获错误:解密Angular中的Url查询参数时UTF-8数据格式不正确

Question

我下面有一个加密和解密服务，我在整个应用程序中使用它来加密和解密本地存储项。虽然它对本地存储项非常有效，但当我试图解密通过queryparams发送的加密对象时，我会得到以下错误：

core.js:478 Uncaught Error: Malformed UTF-8 data

我的加密/解密服务是：

export class AESEncryptDecryptService {
secretKey = 'My secret string';
constructor() { }
encrypt(value? : string) : string{
if(!isNil(value)) {
return CryptoJS.AES.encrypt(value, this.secretKey.trim()).toString();
}
}
decrypt(textToDecrypt?){
if(!isNil(textToDecrypt)) {
return CryptoJS.AES.decrypt(textToDecrypt, this.secretKey.trim()).toString(CryptoJS.enc.Utf8);
}
}
}

在发送之前如何加密对象：

const user= new User();
this.qrUrl =  `${environment.someurl}` +'currentUser=' +this._AESEncryptDecryptService.encrypt(JSON.stringify(user).toString()).toString();

如何解密对象：const url_string=window.location.href；const url=新url(url_string(；

if(url.searchParams.get('user')) {
this.qrDevice = JSON.parse(this._AESEncryptDecryptService.decrypt(url.searchParams.get('user')));
}

我在没有字符串的情况下通过调试进行了尝试。对于其他用途，同样的代码也可以正常工作，但在url查询解密时会出现此错误。

我注意到的一件事是，查询字符串正在用空格替换字符串中的+。如何修复此问题并保留+号？加密对象的预期和实际发布在下面。

从url:分析对象后应为

U2FsdGVkX1+8y4FZ0cDq5ikapUndRA+tE5BAVqYPH9NnhBWeea1asYo5zCU80s/6fWKnU8FghXv7JxPWwnPpJtCR+eXigpiGBWq4gpq00PoeIu2jPsDeifSu8aDrFr+D8abcdkIil5WmsHiND5wVfWHhaBDSSlYMSXbiUXx9DQgRipEAtXXgMEO/r7G5wpuJ9ekEzUfkgXIO3eM/tp6dMu2iWzwbXTDvBZl93J8X Z259YRTIKRXgolSGS2t9yvQOn9I7fobRI1NSCIAftQtGdj/k9pu4B9reicnw9wiNR4dmp8+cpI/3TQ evhwp

从url解析对象后的实际值：

U2FsdGVkX1 8y4FZ0cDq5ikapUndRA tE5BAVqYPH9NnhBWeea1asYo5zCU80s/6fWKnU8FghXv7JxPWwnPpJtCR eXIGpiGBWq4gpq00PoeIuU2jPsDeifSu8aDrFr D8abcdkIil5WmsHiND5wVfWHhaBDSSlYMSXbiUXx9DQgRipeatXXgMEO/r7G5wpuJ9ekEzUfkgXIO3eM/tp6dMu2iWZwbXTDvBZl93J8XZ259YRTI kRXgolSGS2t9yvQOn9I7fobri1NSCIAftQtGdj/k9pu4B9reicnw9wiNR4dmp8 cpI/3TQ evhwp

Answer 1

通过将qrurl更改为以下内容解决了问题：

this.qrUrl =  `${environment.qrOrderURL}user=`+encodeURIComponent(this._AESEncryptDecryptService.encrypt(JSON.stringify(user)));