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;
 });