如何加密和解密角8中的json数据

Question

试图使用加密-js封装和解密json数据。但不起作用。如何找到解决之道。如果有人知道，请帮忙找出解决办法。

演示：https://stackblitz.com/edit/angular-ivy-nwhkgz?file=src%2Fapp%2Fapp.component.ts

storageData=
[

  {

  "customerInfo": { 
    "Micheal": 1,
    "Milson": 2 
  },

  "mycart": {
    "Ol1": 1,
    "Ol3": 1
  },


  "cartItemsList": [
    {
      "pid": "Ol1",
      "name": "Avacota",
      "qty": 1 
    },
    {
      "pid": "Ol3",
      "name": "Kaliflower",
      "qty": 1 
    }
  ],
  
  "cartTotal": 2

  }

  ];
 
ngOnInit(){

//Encrypt Info
this.encryptInfo = encodeURIComponent(CryptoJS.AES.encrypt(this.storageData, 'secret key 123').toString());

console.log("encryptInfo");
console.log(this.encryptInfo);


//Decrypt Info
var deData= CryptoJS.AES.decrypt(this.encryptInfo, 'secret key 123'); 
this.decryptedInfo = decodeURIComponent(deData.toString(CryptoJS.enc.Utf8));   

console.log("decryptedInfo");
console.log(this.decryptedInfo);

}

Answer 1

首先:我不建议你在没有咨询精通密码学和网络安全的人之前亲自为生产使用做这件事。

有两个错误阻碍了密码部分的工作：

1. 您试图加密的数据不是字符串。您应该在加密之前序列化(字符串)它。我使用JSON.stringify在固定的示例中这样做，然后在第51 &59行的
2. (加密后使用encodeURIComponent )中使用JSON.parse解析它，所以在解密之前必须先完成decodeURIComponent。见ln 58

以下是固定的stackblitz：https://stackblitz.com/edit/angular-ivy-h6zlcv?devtoolsheight=33&file=src/app/app.component.ts