【JavaScript】前端如何处理服务端部分接口加解密

核心方案：请求拦截器统一处理 + 接口配置表标记，无感区分加密/非加密接口，低耦合易维护。

1. 核心实现（Axios为例）

步骤1：维护接口配置表（标记加密接口）

集中管理需加密的接口，后续新增/删减直接改配置，无需动业务代码。

javascript 复制代码

// api/config.js （按请求方式+路径唯一标识）
export const encryptApis = new Set([
  'POST:/api/user/submit', // 加密接口
  'GET:/api/data/secret'
]);

步骤2：请求拦截器判断加密

拦截所有请求，匹配配置表则加密请求体，不匹配直接放行。

javascript 复制代码

axios.interceptors.request.use(config => {
  // 拼接标识：请求方式+路径
  const apiKey = `${config.method.toUpperCase()}:${config.url}`;
  if (encryptApis.has(apiKey) && config.data) {
    // 调用加密工具类，替换请求体（按后端约定算法：AES/RSA等）
    config.data = EncryptUtil.encrypt(JSON.stringify(config.data));
    // 可选：加请求头告知后端已加密（如 Content-Type: application/encrypted-json）
    config.headers['Content-Type'] = 'application/encrypted-json';
  }
  return config;
});

步骤3：响应拦截器判断解密

匹配配置表则解密响应数据，不匹配直接返回原始数据。

javascript 复制代码

axios.interceptors.response.use(response => {
  const apiKey = `${response.config.method.toUpperCase()}:${response.config.url}`;
  if (encryptApis.has(apiKey) && response.data) {
    // 解密后转JSON，替换响应数据
    const decrypted = EncryptUtil.decrypt(response.data);
    response.data = JSON.parse(decrypted);
  }
  return response.data;
});

步骤4：加密工具类（通用封装）

抽离加解密逻辑，统一复用，后续切换算法只需改这里。

javascript 复制代码

// utils/EncryptUtil.js
import CryptoJS from 'crypto-js'; // 第三方加密库（按需选AES/RSA）
export const EncryptUtil = {
  // 加密（AES示例，密钥/偏移量与后端一致）
  encrypt(data) {
    const key = CryptoJS.enc.Utf8.parse('后端约定密钥');
    const iv = CryptoJS.enc.Utf8.parse('偏移量');
    return CryptoJS.AES.encrypt(data, key, { iv, mode: CryptoJS.mode.CBC }).toString();
  },
  // 解密
  decrypt(cipherText) {
    const key = CryptoJS.enc.Utf8.parse('后端约定密钥');
    const iv = CryptoJS.enc.Utf8.parse('偏移量');
    return CryptoJS.AES.decrypt(cipherText, key, { iv, mode: CryptoJS.mode.CBC }).toString(CryptoJS.enc.Utf8);
  }
};

2. 核心优势

无感业务代码：接口调用时正常传参，无需手动处理加密，和调用普通接口一致。
统一管控：加解密逻辑、加密接口配置集中管理，无冗余代码，维护成本低。
扩展性强：新接口仅需加配置，算法变更仅改工具类，不影响业务逻辑。

3. 避坑细节

GET请求处理：若GET参数需加密，需在请求拦截器中拼接加密后的参数（而非请求体）。
异常兼容：解密失败统一抛错，配合全局异常提示（如"数据解析失败，请重试"）。
密钥安全：前端密钥易被破解，敏感场景建议后端返回临时密钥，或用RSA非对称加密（仅加密AES密钥）。