Vue请求封装中实现参数加密签名，核心是通过Axios请求拦截器统一生成HMAC-SHA256签名并注入X-Signature、X-Timestamp、X-Nonce请求头，覆盖HTTP方法、路径、排序后params/data、时间戳、随机数及动态密钥，配合后端严格校验防重放与一致性。
Vue 请求封装中实现参数加密签名，核心是在请求发出前统一生成并注入签名，配合后端约定规则完成双向校验。不依赖业务组件手动拼接，而是通过 Axios 拦截器集中控制，既保障安全性，又保持调用简洁。
签名内容必须覆盖可篡改字段
签名不是简单加密某个值，而是对所有可能被中间人修改的输入做确定性摘要。关键字段包括：
- HTTP 方法（GET/POST/PUT 等，大小写敏感）
-
请求路径（不含域名，如
/api/user/list） -
查询参数（params）：按 key 字母序排序后拼接成
k1=v1&k2=v2格式 - 请求体（data）：POST/PUT 等需序列化为字符串，空对象转为空字符串，JSON 字符串保持原样不重复 JSON.stringify
- 时间戳（timestamp）：毫秒级，用于防重放，建议限定 5 分钟有效窗口
- 随机唯一标识（nonce）：每次请求生成 UUID 或 16 位随机字符串，避免相同参数反复提交
- 密钥（secret）：前后端共享的静态密钥或动态 token，绝不暴露在前端代码中（应由登录后接口下发）
前端签名生成与注入方式
使用 axios.create() 创建独立实例，在请求拦截器中完成签名计算和头信息注入：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 签名算法推荐 HMAC-SHA256（比 MD5 更安全），用
crypto-js或原生SubtleCrypto - 签名结果放入请求头，如
X-Signature，而非 URL 或 body 中——避免日志泄露、代理截断 - 同时注入
X-Timestamp和X-Nonce，便于后端校验时效性与唯一性 - 对 GET 请求，
config.params参与签名；对 POST/PUT，config.data必须参与，且需兼容表单、JSON、FormData 三种格式
防重放与密钥管理要点
签名本身不能防止重放攻击，必须叠加时间与状态控制：
立即学习“前端免费学习笔记（深入）”；
- 后端收到请求后，先检查
X-Timestamp是否在允许偏移范围内（如 ±300 秒），超时直接拒绝 - 将
X-Nonce + X-Timestamp组合作为 Redis key 存储（TTL 设为略大于时间窗口，如 310 秒），已存在则视为重放 - 密钥不应硬编码在前端。推荐方案：用户登录成功后，后端返回短期有效的
sign_key，存入内存变量或加密存储的 sessionStorage，每次签名前动态读取 - 若使用 RSA 非对称签名，前端仅持公钥加密，私钥始终保留在后端，但性能开销较大，适合关键操作（如支付确认）
后端校验逻辑需严格对齐
前端生成签名的方式，必须与后端完全一致，否则校验必失败。常见坑点：
- URL 编码处理：前端拼接前是否 encodeURIComponent？后端解析 params 时是否自动 decode？必须统一策略
- 空值处理：
null、undefined、空字符串在排序和拼接时是否忽略？前后端需明确定义 - body 类型判断：
Content-Type: application/json时读req.body；application/x-www-form-urlencoded时需解析 form data 再排序 - 大小写与空白：签名字符串中连接符用
&还是&？是否保留末尾 &？HMAC 输入必须字节级一致
