快捷導(dǎo)航

vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)

更新時間：2023年12月28日 09:10:01 作者：fat_shady

防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關(guān)于vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)的相關(guān)資料,需要的朋友可以參考下

項目場景：

防止數(shù)據(jù)被爬取，前后端傳參接收參數(shù)需要加密處理，使用AES加密。主要使用CryptoJS庫中的函數(shù)方法，加密：CryptoJS.AES.encrypt(), 解密：CryptoJS.AES.decrypt()。

代碼實現(xiàn)

安裝CryptoJS庫：

npm install crypto-js

創(chuàng)建文件夾，@/utils/secret，引入CryptoJS庫并封裝加密解密函數(shù)方法：

import CryptoJS from 'crypto-js/crypto-js';
const key = CryptoJS.enc.Utf8.parse('123321'); // 密鑰 后端提供
const iv = CryptoJS.enc.Utf8.parse(''); // 偏移量
/**
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt(word) {
  const srcs = CryptoJS.enc.Utf8.parse(word);
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

/**
 * AES 解密 ：字符串 key iv  返回base64
 *  */
export function Decrypt(word) {
  const base64 = CryptoJS.enc.Base64.parse(word);
  const src = CryptoJS.enc.Base64.stringify(base64);

  const decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return CryptoJS.enc.Utf8.stringify(decrypt);
}

引入加密解密方法，對axios中封裝的request 請求前的統(tǒng)一處理做加密：

// 引入
import { Encrypt, Decrypt } from '/@/utils/secret';

this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
      // If cancel repeat request is turned on, then cancel repeat request is prohibited
      // @ts-ignore
      const { ignoreCancelToken } = config.requestOptions;
      const ignoreCancel =
        ignoreCancelToken !== undefined
          ? ignoreCancelToken
          : this.options.requestOptions?.ignoreCancelToken;

      !ignoreCancel && axiosCanceler.addPending(config);
      if (requestInterceptors && isFunction(requestInterceptors)) {
        config = requestInterceptors(config, this.options);
      }
       // 關(guān)鍵代碼：
       // JSON加密，formData不加密（對需要處理的數(shù)據(jù)格式做判斷）
       if (Object.prototype.toString.call(config.data) != '[object FormData]') {
         config.data = { encryptedData: Encrypt(JSON.stringify(config.data)) }; // 加密傳參，后端要求的傳參：encryptedData：加密參數(shù)
       }
      return config;
    }, undefined);

response 響應(yīng)前的統(tǒng)一處理做解密：

this.axiosInstance.interceptors.response.use(async (res: AxiosResponse<any>) => {
	  // 關(guān)鍵代碼：
      // 導(dǎo)出時數(shù)據(jù)格式為blob不解密（對需要處理的數(shù)據(jù)格式做判斷）
      if (Object.prototype.toString.call(res.data) != '[object Blob]') {
        res.data = JSON.parse(Decrypt(res.data)); // 解密返回參數(shù)
      }
      const config = res.config;
      if (res.data.code === 401) {
        // 如果未認(rèn)證，并且未進(jìn)行刷新令牌，說明可能是訪問令牌過期了
        if (!isRefreshToken) {
          isRefreshToken = true;
          // 1. 獲取到刷新token
          if (getRefreshToken()) {
            // 2. 進(jìn)行刷新訪問令牌
            try {
              const refreshTokenRes = await this.refreshToken();
              // 2.1 刷新成功，則回放隊列的請求 + 當(dāng)前請求
              setToken('Bearer ' + refreshTokenRes.data.data.accessToken);
              (config as Recordable).headers.Authorization = getToken();
              requestList.forEach((cb: any) => {
                cb();
              });
              requestList = [];
              return new Promise((resolve) => {
                resolve(this.axiosInstance(config));
              });
              // res = await Promise.all([this.axiosInstance(config)])[0]
            } catch (e) {
              requestList.forEach((cb: any) => {
                cb();
              });
            } finally {
              requestList = [];
              isRefreshToken = false;
            }
          }
        } else {
          // 添加到隊列，等待刷新獲取到新的令牌
          return new Promise((resolve) => {
            requestList.push(() => {
              (config as Recordable).headers.Authorization = getToken(); // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
              resolve(this.axiosInstance(config));
            });
          });
        }
      }
      res && axiosCanceler.removePending(res.config);
      if (responseInterceptors && isFunction(responseInterceptors)) {
        res = responseInterceptors(res);
      }
      return res;
    }, undefined);