Vue 3 中 Axios 请求防篡改签名需绑定时间戳、业务参数和密钥三要素，前端通过拦截器生成并注入 X-Signature 和 X-Timestamp 请求头，后端同步验签确保参数未被篡改、时效性及防重放。
Vue 3 中用 Axios 实现请求参数防篡改签名，核心是利用请求拦截器在发请求前生成签名，并由后端同步验签。签名本身不加密数据，而是确保“参数没被改过、时间没超期、不是重放请求”。关键不在多复杂，而在前后端逻辑严格一致。
签名要包含哪些必要字段
只对业务参数签名远远不够。真实场景中，签名必须绑定三个要素：
- 时间戳（timestamp）：单位秒，用于防重放，后端通常只接受 5 分钟内的请求
- 业务参数（params 或 data）：GET 请求用 params，POST/PUT 等用 data，需统一提取并排序
- 固定密钥（secret key）：前后端约定的私有字符串，绝不传给前端代码（应由后端注入或通过安全方式下发）
前端签名逻辑怎么写（Vue 3 + Axios）
推荐封装一个独立的 signatureUtil.js 工具函数，避免把密钥硬编码在拦截器里：
```js
// utils/signatureUtil.js
import { md5 } from 'js-md5'
export const generateSignature = (params = {}, timestamp = Math.floor(Date.now() / 1000)) => {
const secret = 'your-secret-from-backend' // 实际应通过 config 或环境变量安全获取
// 合并时间戳，排除 sign 字段自身
const payload = { ...params, timestamp }
// 按键名升序排列后拼接 k1v1k2v2…
const sortedKeys = Object.keys(payload).filter(k => k !== 'sign').sort()
const str = sortedKeys.map(k => `${k}${payload[k]}`).join('')
return md5(str + secret)
}
```
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
然后在 Axios 实例的请求拦截器中调用：
```js
// utils/request.js
import axios from 'axios'
import { generateSignature } from './signatureUtil'
const api = axios.create({ baseURL: '/api', timeout: 10000 })
api.interceptors.request.use(config => {
const timestamp = Math.floor(Date.now() / 1000)
let signParams
if (config.method === 'get') {
signParams = { ...config.params }
} else {
signParams = { ...config.data }
}
const sign = generateSignature(signParams, timestamp)
// 统一加到请求头，比塞进 params/data 更规范
config.headers['X-Signature'] = sign
config.headers['X-Timestamp'] = timestamp
return config
export default api
```
为什么推荐把签名放请求头而不是参数里
把 X-Signature 和 X-Timestamp 放请求头，有三个实际好处：
- 避免签名字段参与自身计算（比如把 sign=xxx 塞进 params 再签名，会陷入循环）
- 后端中间件可统一提取校验，不侵入业务控制器逻辑
- GET 请求 URL 长度有限，签名过长容易触发 414 错误；POST 的 body 也可能含二进制或大文本，头字段更轻量稳定
后端验签必须同步做三件事
前端做了签名，后端验签不能只比对 MD5。一次完整校验至少包括：
- 检查 X-Timestamp 是否在有效窗口内（如 ±300 秒），超时直接拒绝
- 按相同规则重组参数（注意空值、null、undefined 的处理要和前端完全一致）
- 用相同 secret + 相同拼接方式重新计算 MD5，与 X-Signature 严格比对
漏掉任何一项，都可能让签名形同虚设——比如没校验时间戳，攻击者截获请求后反复重放；没统一空值处理，前后端算出的字符串根本不同。
