vue 封装 axios 并使用 aes 对请求响应数据加解密

首先，我们需要创建一个用于封装axios的js文件，例如api.js。然后，我们将使用AES加密库，例如crypto-js，来处理加密和解密。

以下是一个简单的示例：

1. 安装axios和crypto-js：

npm install axios crypto-js

2. 创建api.js文件并编写代码：

import axios from 'axios';
import CryptoJS from 'crypto-js';
 
const api = axios.create({
  baseURL: 'http://your-api-url.com',
  timeout: 10000,
});
 
// 密钥，应该是动态的，不应该硬编码在脚本中
const secretKey = 'your-secret-key';
 
// 请求拦截器
api.interceptors.request.use(config => {
  // 在这里可以添加需要的headers或者其他信息
  return config;
}, error => {
  return Promise.reject(error);
});
 
// 响应拦截器
api.interceptors.response.use(response => {
  // 解密数据
  const data = CryptoJS.AES.decrypt(response.data, secretKey).toString(CryptoJS.enc.Utf8);
  return JSON.parse(data);
}, error => {
  return Promise.reject(error);
});
 
export default api;

3. 使用封装好的axios实例进行请求：

import api from './api.js';
 
api.get('/endpoint')
  .then(response => {
    console.log(response); // 已解密的数据
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们对响应数据使用AES解密，并假设服务器返回的数据已经被AES加密。这样，每当我们从服务器获取数据时，我们都会自动进行解密。这种封装方式可以使我们的代码更加清晰和可维护。