Vue.js 应用中的 HTTP axios 请求加密

Vue.js 应用中的 HTTP 请求加密

---

概述

本文档概述了在Vue.js应用程序中使用提供的代码片段对HTTP请求进行加密的过程。加密通过高级加密标准（AES）算法实现。实现涉及拦截HTTP请求并在将其发送到服务器之前对请求参数或数据进行加密。

---

代码结构

1. encry_http_v1 函数

/**
 * 在发送请求之前加密HTTP请求。
 *
 * @param {Object} config - Axios请求配置对象。
 * @returns {Object} - 使用加密参数或数据更新的Axios请求配置。
 */
export function encry_http_v1(config) {
  // HTTP请求的调试日志记录（条件性）
  if (localStorage.getItem('http_debug') === '1') {
    console.log('%c' + config.url + '', 'color: green;', config.params, config.data, JSON.parse(JSON.stringify(config)))
  }

  let key, iv;

  try {
    // 获取令牌并提取密钥和初始化向量
    let token = Vue.prototype.getToken();
    if (token) token = token.slice(-32);
    key = token.substr(16, 16);
    iv = token.substr(0, 16);
  } catch (e) {
    // 处理异常（如果有）
  }

  const _t = +new Date();

  // 如果未提供默认值，设置params和data的默认值
  if (!config.params || Object.keys(config.params).length === 0) config.params = { _t };
  if ((!config.data || Object.keys(config.data).length === 0) && !(config.data instanceof FormData)) config.data = { _t };

  // 处理GET请求
  if (config.method === 'get') {
    const jsonStr = JSON.stringify({ ...config.params, _t });
    config.params = { requestParams: encryption_v1(jsonStr, key, iv) };
  }

  // 处理POST请求
  if (config.method === 'post' && !(config.data instanceof FormData)) {
    const jsonStr = JSON.stringify({ ...config.data, _t });
    config.data = { requestParams: encryption_v1(jsonStr, key, iv) };
  }

  // 使用时间戳更新params
  config.params = {
    _t,
    ...config.params
  };

  return config;
}

2. Axios 请求拦截器

// Axios请求拦截器
service.interceptors.request.use(config => {
  // 如果有访问令牌，则将其附加到头部
  const token = Vue.ls.get(ACCESS_TOKEN);
  if (token) {
    config.headers['X-Access-Token'] = token;
  }

  // 附加自定义的Axios令牌
  config.headers["X-Axios-Pass"] = getAxiosToken(config);

  // 使用定义的函数加密HTTP请求
  return encry_http_v1(config);
}, (error) => {
  // 处理请求拦截错误
  return Promise.reject(error);
});

3. encryption_v1 函数

/**
 * 使用AES加密算法加密单词。
 *
 * @param {string} word - 要加密的单词。
 * @param {string} _key - 加密密钥（默认值：'xxxx'）。
 * @param {string} _iv - 初始化向量（默认值：'xxxx'）。
 * @returns {string} - Base64编码的加密密文。
 */
export function encryption_v1(word, _key = undefined, _iv = undefined) {
  let key = CryptoJS.enc.Utf8.parse(_key || 'xxxx');
  let iv = CryptoJS.enc.Utf8.parse(_iv || 'xxxx');
  let srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });

  // 返回Base64编码的加密密文
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

---

使用

1. 加密请求：encry_http_v1 函数作为Axios拦截器用于加密HTTP请求。它检查请求方法（GET或POST）并使用 encryption_v1 函数相应地加密参数或数据。

2. 令牌处理：访问令牌附加到请求头部。此外，还包括自定义的Axios令牌（X-Axios-Pass）。

3. 调试日志：HTTP请求的调试日志可用，可以通过在本地存储中设置 http_debug 标志来启用。

4. 加密函数：encryption_v1 函数使用AES算法处理实际加密。它接受单词、加密密钥和初始化向量作为输入，并生成Base64编码的加密密文。

---

注意事项

• 确保必要的依赖项（Vue、CryptoJS等）已正确配置并在应用程序中可用。

• 根据安全要求自定义加密密钥和初始化向量的默认值。

• 此实现假定在Vue.js应用程序中使用Axios进行HTTP请求。

• 应适当处理异常，特别是在令牌检索期间。

---

本文档提供了Vue.js应用程序中HTTP请求加密过程的概述。开发人员应根据特定项目要求和安全考虑对代码进行调整和定制。