使用AES加密工具对请求加密

简介： 日常开发中，数据请求的加解密是比较常见的场景，因为数据传输的安全是非常必要的。AES是比较常见和常用的一种请求加密方案，属于对称加密的一种，优点是对数据没有长度限制，加解密速度快；实现方式简单；缺点是没那么安全：秘钥的传输及保管是个问题，任何一方的秘钥泄漏都将导致数据的不安全

1. 安装 crypto-js

npm i -S crypto-js

2. 配置 utils 加密工具函数

import CryptoJS from 'crypto-js';
// 默认的 KEY 与后台一致，十六位十六进制数作为密钥
const KEY = CryptoJS.enc.Utf8.parse('与后台一直的密钥');
export default {
  // 加密
  EncryptData: data => {
    let srcs = CryptoJS.enc.Utf8.parse(data);
    let encrypted = CryptoJS.AES.encrypt(srcs, KEY, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    });
    return encrypted.toString();
  },
  // 解密
  DecryptData: data => {
    let decrypt = CryptoJS.AES.decrypt(data, KEY, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    });
    return JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt).toString());
  },
};

3. 使用

在Vue工程或React工程中，通常是在请求工具(axios,umi-request/fetch或其他请求工具)中全局配置，以下已 umi-request  为例：

1. 在请求拦截器中对请求的数据体进行加密

request.interceptors.request.use((url, options) => {
   if (process.env.NODE_ENV !== 'development') {
     if (options.method === 'post' && !url.includes('generatorToken')) {
       /** 
         * 数据加密，如果是json，需要先转换成字符串
         * 这里是对整个json进行加密，也可以对单个字段进行加密
         */ 
       options.data = AESUtil.EncryptData(JSON.stringify(options.data));
     }
   }
   return { url, options };
 });

2. 在响应拦截器中对返回的数据体进行解密

request.interceptors.response.use(async res => {
   const resData = await res.clone().json();
   const response = res.clone();
   response.data = resData;
   if (process.env.NODE_ENV !== 'development') {
     if (response.data.data) {
       // 数据解密
       response.data.data = AESUtil.DecryptData(response.data.data);
     }
   }
   return response.data;
 });