«

axios请求响应数据加解密封装如何实现

时间:2024-8-2 10:48     作者:韩俊     分类: ios


本篇内容主要讲解“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
。在请求成功后,控制台将输出返回的数据。对于这个加密秘钥可以统一封装好,可以不用每次调用的时候都去传参。

标签: ios

热门推荐