axios請求響應數據加解密封裝如何實現

本篇內容主要講解“axios請求響應數據加解密封裝如何實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“axios請求響應數據加解密封裝如何實現”吧!

安裝依賴

在前端開發中，我們經常需要向后端發送請求獲取數據。為了保證數據的安全性，在發送請求時需要對請求參數進行加密處理。本文將介紹如何使用Typescript、Axios封裝請求響應數據加解密。

首先我們需要安裝以下依賴：

• Axios：用于發送請求

• crypto-js：用于加密請求參數

npm install axios crypto-js
npm install axios

封裝基礎axios

以下是一個基礎的Axios配置，使用Typescript和Axios進行封裝。它包括一個攔截器，用于在每個請求中添加一個通用的請求頭。您可以在這個基礎上擴展您的請求配置。

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
const axiosInstance: AxiosInstance = axios.create({
  baseURL: '<http://example.com/api>',
  timeout: 10000,
  withCredentials: true, // 允許攜帶cookie
});
axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers.common['Authorization'] = 'your-token';
  return config;
});
export default axiosInstance;

在這個示例中，我們創建了一個名為axiosInstance的Axios實例，它有一個通用的請求頭Authorization，值為your-token。您可以根據自己的需要修改和擴展這個基礎配置。

例如，您可以添加一個攔截器，用于在每個請求中添加一個時間戳，以確保請求不會被緩存：

axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers.common['Authorization'] = 'your-token';
  config.headers.common['Cache-Control'] = 'no-cache';
  config.headers.common['Pragma'] = 'no-cache';
  config.headers.common['Expires'] = '0';
  config.params = {
    ...config.params,
    timestamp: new Date().getTime(),
  };
  return config;
});

除此之外，您還可以在這個基礎配置中添加錯誤處理邏輯、超時處理邏輯等等，以滿足您的具體需求。

封裝加密方法

單獨封裝出加密的方法，可以更加方便的調用，代碼如下：

import CryptoJS from 'crypto-js';
/**
 * 對數據進行加密處理
 * @param data 需要加密的數據
 * @param key 加密密鑰
 * @returns 加密后的字符串
 */
export const encryptData = (data: any, key: string): string => {
  // 使用CryptoJS庫的AES加密方法對數據進行加密處理
  const ciphertext = CryptoJS.AES.encrypt(
    JSON.stringify(data),
    CryptoJS.enc.Utf8.parse(key),
    {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    }
  );
  // 將加密后的結果轉換為字符串，并返回
  return ciphertext.toString();
}

這個方法接收兩個參數：需要加密的數據以及加密密鑰。它使用AES算法對數據進行加密，并返回加密后的字符串。

封裝解密方法

單獨封裝出解密的方法，可以更加方便的調用，代碼如下：

import CryptoJS from 'crypto-js';
/**
 * 解密數據
 * @param ciphertext 密文
 * @param key 解密密鑰
 * @returns 解密后的數據
 */
export const decryptData = <T>(ciphertext: string, key: string): T => {
  let decryptedData;
  try {
    // 使用CryptoJS庫的AES解密方法對數據進行解密處理
    const decryptedBytes = CryptoJS.AES.decrypt(
      ciphertext,
      CryptoJS.enc.Utf8.parse(key),
      {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      }
    );
    // 將解密后的結果轉換為字符串，并解析為JSON對象
    const decryptedString = decryptedBytes.toString(CryptoJS.enc.Utf8);
    decryptedData = JSON.parse(decryptedString);
  } catch (error) {
    // 如果解密失敗，拋出一個錯誤
    throw new Error('Failed to decrypt data: ' + error.message);
  }
  // 返回解密后的數據
  return decryptedData as T;
}

在decryptData函數上添加一個泛型<T>，表示期望的解密后的數據的類型。在函數的返回語句中，將返回值轉換為T類型。在使用decryptData函數時，需要顯式指定期望的返回類型，例如：const decryptedData: MyData = decryptData<MyData>(ciphertext, key);。

封裝請求方法

接下來封裝一個請求方法，使用Axios發送請求并在發送請求之前對請求參數進行加密處理。解密后臺返回的數據使用了與加密方法相同的密鑰，將返回的密文數據存儲在res.data中。然后，使用CryptoJS庫的AES解密方法將密文數據解密為字符串，并將其解析為JSON對象。代碼如下：

import axios, { AxiosResponse, AxiosError } from 'axios';
import CryptoJS from 'crypto-js';
/**
 * 發起加密GET請求
 * @param url 請求地址
 * @param params 請求參數
 * @param key 加密密鑰
 * @returns 返回解密后的JSON對象
 */
export const requestGet = async <T>(url: string, params: any, key: string): Promise<T> => {
  const encryptedParams = encryptData(params, key);
  try {
    const res = await axios.get(url, {
      params: {
        data: encryptedParams,
      },
    });
    if (!res.data) {
      throw new Error('Response data is empty.');
    }
    return decryptData<T>(res.data, key);
  } catch (error) {
    throw new Error('Failed to send request: ' + error.message);
  }
};
/**
 * 發起加密POST請求
 * @param url 請求地址
 * @param data 請求參數
 * @param key 加密密鑰
 * @returns 返回解密后的JSON對象
 */
export const requestPost = async <T>(url: string, data: any, key: string): Promise<T> => {
  const encryptedData = encryptData(data, key);
  try {
    const res = await axios.post(url, {
      data: encryptedData,
    });
    if (!res.data) {
      throw new Error('Response data is empty.');
    }
    return decryptData<T>(res.data, key);
  } catch (error) {
    throw new Error('Failed to send request: ' + error.message);
  }
};

將requestGet和requestPost方法的返回類型定義為Promise<T>，其中T是解密后的數據類型。在調用這些方法時顯式指定解密后的數據類型，例如const res = await requestGet<MyData>('<http://example.com/api/data>', params, 'my-secret-key');。

requestGet方法封裝了一個GET請求，requestPost方法封裝了一個POST請求。使用了CryptoJS庫的AES加密和解密方法對請求參數和返回數據進行了處理。在使用這些方法時，您需要提供加密密鑰，并根據需要傳遞請求參數。

對返回的數據檢測是否為空或無效。如果數據為空或無效，我們將拋出一個錯誤。然后使用AES解密方法對返回的數據進行解密。如果解密失敗，將拋出一個錯誤。然后，將解密后的數據解析為JSON對象。如果解析失敗，將拋出一個錯誤。最后，將解密后的JSON對象返回給調用方。

使用封裝方法

在React組件中使用我們封裝的請求方法了。代碼如下：

import { request } from './request';
const App = () => {
  const handleGetData = async () => {
    try {
     const res = await requestPost('<http://example.com/api/data>', {
        username: 'user',
        password: 'pass',
      }, 'my-secret-key');
      console.log(res.data);
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <button onClick={handleGetData}>Get Data</button>
  );
}

上述代碼中，調用requestPost方法發送一個POST請求，請求參數為{ username: 'user', password: 'pass' }。傳遞的加密密鑰為my-secret-key。在請求成功后，控制臺將輸出返回的數據。對于這個加密秘鑰可以統一封裝好，可以不用每次調用的時候都去傳參。

到此，相信大家對“axios請求響應數據加解密封裝如何實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！