如何在angular 8中加密和解密json数据

Question

尝试使用 crypto-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 行使用 JSON.parse 解析它
2. 您在加密后使用了 encodeURIComponent，因此必须在解密之前完成 decodeURIComponent。见 ln 58

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