Vue 3 中 Axios 响应拦截器统一解密敏感数据：通过判断响应头（如 x-encrypted）触发 AES/SM2 解密，还原明文后注入 response.data；密钥须动态下发或安全存储，严禁硬编码，二进制流需单独用 FileReader 处理。
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，供后续下载或预览
避免常见陷阱
实际落地时容易忽略的关键点：
- 加密字段名不统一：后端可能把密文放在
data、payload或body下，需约定并适配 - 字符编码错乱：AES 解密后若含中文，必须用
CryptoJS.enc.Utf8解码，否则出现乱码 - 错误吞没：解密失败时不要静默返回空对象，要抛出明确错误，便于定位是密钥错、格式错还是网络截断
- 性能影响：大文本或高频接口解密会阻塞主线程，可考虑 Web Worker 分离计算
