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

标题：axios请求响应数据加解密封装实现详解

介绍

在进行Web开发时，我们时常需要向服务端发送请求，并获取响应数据，为了保证数据安全，我们通常会对请求和响应数据进行加解密处理。本攻略将详细讲解如何使用axios对请求和响应数据进行加解密的封装实现。

实现步骤

1. 创建几个加解密函数

我们需要创建以下几个加解密函数：

encryption(data): 对数据进行加密
decryption(data): 对数据进行解密
encryptRequest(config): 对请求数据进行加密
decryptResponse(response): 对响应数据进行解密

这些函数可以根据具体需求进行编写，这里假设 encryption 和 decryption 都是 AES 加密算法。

示例代码：

import CryptoJS from 'crypto-js';

const key = CryptoJS.enc.Utf8.parse("abcdabcdabcdabcd");
const iv = CryptoJS.enc.Utf8.parse("1234123412341234");

function encryption(data) {
  const ciphertext = CryptoJS.AES.encrypt(
    JSON.stringify(data),
    key,
    { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }
  );
  return ciphertext.toString();
}

function decryption(data) {
  const bytes = CryptoJS.AES.decrypt(
    data,
    key,
    { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }
  );
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}

2. 配置axios拦截器

配置axios拦截器，用于在请求和响应时对数据进行加解密处理。

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 5000
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    if (config.method === 'post') {
      const data = config.data;
      config.data = {
        data: encryption(data)
      };
    }
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code === undefined) {
      return decryption(res);
    } else {
      return res;
    }
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default service;

3. 使用封装好的axios发送请求

现在我们可以使用封装好的axios发送请求了，请求的数据会自动进行加密，响应的数据会自动进行解密。

示例代码：

import request from '@/utils/request';

request({
  url: '/api/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

示例说明

示例1：加密请求数据

现在，我们往 encryptRequest 函数中增加一个打印语句，来查看请求数据是否被加密：

function encryptRequest(config) {
  const data = config.data;
  console.log('未加密前：', data);
  config.data = {
    data: encryption(data)
  };
  console.log('加密后：', config.data);
  return config;
}

我们来发送一个请求，查看数据是否被加密了：

import request from '@/utils/request';

request({
  url: '/api/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

在控制台输出：

未加密前： { username: 'admin', password: '123456' }
加密后： { data: 'OC/UtAxk2tHN1xLYWxvVlgjauFCjKcZesKKoaSkvj8E=' }

我们可以看到，请求数据已经被加密了。

示例2：解密响应数据

现在，我们往 decryptResponse 函数中增加一个打印语句，来查看响应数据是否被解密：

function decryptResponse(response) {
  const res = response.data;
  console.log('加密响应数据：', res);
  if (res.code === undefined) {
    const data = decryption(res);
    console.log('解密后：', data);
    response.data = data;
  }
  return response;
}

我们来发送一个请求，查看数据是否被解密了：

import request from '@/utils/request';

request({
  url: '/api/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});