前端axios封装请求拦截器中给参数加密，响应拦截器添加解密。。js库 CryptoJS使用（详细）

置顶

Life a dream

已于 2022-11-06 16:49:47 修改

阅读量4.8k

点赞数 2

分类专栏： vue框架 axios的封装请求前需求文章标签： javascript 前端安全

于 2022-07-04 11:26:18 首次发布

本文链接：https://blog.csdn.net/Li8L9xF/article/details/125594778

版权

本文介绍了前端如何使用CryptoJS库来加密HTTP请求的参数，并在响应拦截器中进行解密，确保与后端接口交互过程中的信息安全。通过封装axios，实现AES加密与解密，确保数据在传输过程中的安全性。

摘要由CSDN通过智能技术生成

与后端接口进行加密传参，接收参数。。。前端信息安全处理

为什么要编码？

由于一些网络通讯协议的限制, 又或者是出于信息加密的目的, 我们就需要将原信息转换为base64编码,然后才能进行传输.例如，发送某些含有 ASCII 码表中0到31之间的控制字符的数据。

window.btoa 对字符串进行 base64编码（注意不能编码中文）;
winodw.atob 对 base64字符串进行解码（对于包含中文的 base64编码，不能正确解码）;

AES 加密 —安装：

npm install crypto-js

例子使用：

aes加密: crypto.js

 import CryptoJS from "crypto-js";
 let CryptoJSKey = '0fHBHGFCRFFG1e25se' //16位自定义的，要与后端一起配置
 const key = CryptoJS.enc.Utf8.parse(CryptoJSKey); 
 const iv = CryptoJS.enc.Utf8.parse(CryptoJSKey);
 //AES加密传参 （封装）
 Encrypt(word) {
   
    let srcs = CryptoJS.enc.Utf8.parse(word);//需要加密的内容
   // let encrypted = CryptoJS.AES.encrypt(srcs, key, {
   
  //   iv: iv,
  //   mode: CryptoJS.mode.CBC,
  //   padding: CryptoJS.pad.Pkcs7
  // });
    
    if (typeof word == "string") {
   
      const srcs = CryptoJS.enc.Utf8.parse(word);
      encrypted = CryptoJS.AES.encrypt(srcs, key, {
   
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
    } else if (typeof word == "object") {
   
      //对象格式的转成json字符串
      const data = JSON.stringify(word);
      const srcs = CryptoJS.enc.Utf8.parse(data);
      encrypted = CryptoJS.AES.encrypt(srcs, key, {
   
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });