Vue 3 中 Axios 怎么对接口返回的敏感数据进行解密还原-Vue.js-PHP中文网

Vue 3 中 Axios 响应拦截器统一解密敏感数据：通过判断响应头（如 x-encrypted）触发 AES/SM2 解密，还原明文后注入 response.data；密钥须动态下发或安全存储，严禁硬编码，二进制流需单独用 FileReader 处理。

vue 3 中 axios 怎么对接口返回的敏感数据进行解密还原

Vue 3 中 Axios 对接口返回的敏感数据进行解密还原，核心在于**在响应拦截器中统一处理加密响应体，并用对应算法（如 AES、SM2）解密后再交还给业务逻辑**。这不是“自动解密”，而是你主动控制解密时机和方式，确保敏感字段（如用户密码、身份证号、交易内容）在进入组件前已还原为明文。

确认后端加密方式与密钥管理

解密的前提是知道后端用什么算法、模式、密钥和 IV（初始化向量）。常见组合有：

AES-CBC + 16 字节密钥 + 16 字节 IV（需前后端严格一致）
SM2 公钥加密 + 私钥解密（前端持有私钥，仅限内网或可信环境）
Base64 或自定义编码（⚠️注意：这不是加密，仅混淆，不可用于真正敏感数据）

密钥不能硬编码在前端代码里。推荐方式：

登录成功后由后端动态下发密钥（加签保护）
从安全存储（如受保护的 sessionStorage + 时间戳校验）读取
内网环境可预置在 config 文件中，但需明确标注“仅限内网”

在响应拦截器中统一解密

使用 axios.create() 创建实例，在 response interceptor 中判断响应是否为加密格式（例如检查 headers 中的 X-Encrypted: true，或约定响应 data 结构含 cipherText 字段），再调用解密函数：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

import CryptoJS from 'crypto-js';
import { ElMessage } from 'element-plus';

const api = axios.create({ baseURL: '/api' });

api.interceptors.response.use(
  response => {
    const { data, headers } = response;

    // 判断是否需要解密（以 X-Encrypted 标识为例）
    if (headers['x-encrypted'] === 'true') {
      try {
        const key = CryptoJS.enc.Utf8.parse('your-16-byte-key');
        const iv = CryptoJS.enc.Utf8.parse('your-16-byte-iv');
        
        const decrypted = CryptoJS.AES.decrypt(data.cipherText, key, {
          iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        });
        
        const plaintext = decrypted.toString(CryptoJS.enc.Utf8);
        response.data = { ...data, decryptedData: JSON.parse(plaintext) };
      } catch (e) {
        ElMessage.error('解密失败，请检查密钥或网络');
        return Promise.reject(e);
      }
    }

    return response;
  },
  error => Promise.reject(error)
);

对二进制流响应单独处理

如果接口返回的是加密的文件流（如 PDF、Excel），且 content-type 是 application/octet-stream 或 blob，不能直接用 JSON 解析。需先提取 blob，再用 FileReader 读取为文本后解密：

请求时设置 responseType: 'blob'
在响应拦截器中检查 res.headers['content-type'] 是否为二进制类型
用 FileReader.readAsArrayBuffer() 读取，再转为 Uint8Array，传入解密函数（如 SM2/SM4 的 WebAssembly 实现）
解密后生成新 blob 并替换 response.data，供后续下载或预览