Vue 3中请求拦截器负责生成并附加签名而非校验，需按约定算法对路径、方法、时间戳、随机串、排序后query及body摘要等要素有序拼接签名，并通过请求头注入；query参数必须规范化处理且参与签名。
在 Vue 3 中，请求拦截器本身不直接“校验”查询参数，而是负责在请求发出前生成并附加签名——校验动作由后端完成。前端的关键任务是：按约定算法（如 HMAC-SHA256）对请求参数（含 query、body、timestamp、method、path 等）做有序拼接与签名，并将 signature、timestamp、key（或 appid）等塞入请求头或 query 中。
签名必须包含哪些要素
签名不是简单哈希，而是带防重放和身份标识的可控计算。典型要素包括：
-
请求路径（不带域名和 query）：如
/api/user/list -
HTTP 方法：如
GET或POST - 时间戳（timestamp）：单位秒或毫秒，后端会校验是否超时（如 ±5 分钟）
- 随机字符串（nonce）或请求 ID：防止重放攻击，建议每次请求唯一
-
排序后的全部 query 参数键值对：例如
a=1&b=2&sort=c→ 按 key 字典序排列后拼接 - 请求体（仅 POST/PUT 等）的摘要：如 JSON 字符串的 SHA256 值（若接口要求）
- 密钥（secret）：前端从配置或安全存储中获取，不可硬编码在代码里
在 axios 请求拦截器中生成并注入签名
以 Vue 3 + TypeScript 项目为例，推荐封装一个 signatureUtil.ts 工具函数，再在拦截器中调用：
✅ 示例逻辑（简化版）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
假设你已定义好generateSignature(config: AxiosRequestConfig) 函数，它返回 { signature, timestamp, nonce, key }在 src/utils/request.ts 中：
import axios from 'axios'
import { generateSignature } from './signatureUtil'
const request = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 10000
})
request.interceptors.request.use(config => {
// 仅对需要签名的接口启用（可加白名单判断）
if (config.url?.includes('/api/') && !config.headers['skip-sign']) {
const { signature, timestamp, nonce, key } = generateSignature(config)
config.headers['X-Signature'] = signature
config.headers['X-Timestamp'] = String(timestamp)
config.headers['X-Nonce'] = nonce
config.headers['X-App-Key'] = key
}
return config
})
export default request
query 参数参与签名的注意事项
很多开发者误以为只需签 body，其实 GET 请求的 query 是核心签名数据源。关键点：
- 必须规范化 query：去掉空值、解码后再 encode（避免前后端 URL 编码差异），键名小写、升序排列
-
不要遗漏默认参数：比如分页接口常带
page=1&size=10，这些也要参与签名 -
禁止动态添加未签名参数：如果在拦截器之后又手动改
config.params，签名就失效了 - 区分 GET 和 POST 的签名范围：GET 只签 query；POST 通常需同时签 query + body（JSON stringified 后的 SHA256）
如何调试签名是否正确
签名失败常见于前后端时间不同步、参数排序不一致、编码方式不统一。建议：
- 前端在生成签名前，把待签名字符串
console.log出来（开发环境） - 后端也输出收到的原始参数和计算出的待签名串，比对是否完全一致
- 使用固定测试值（如 timestamp=1700000000，nonce=test123）跑通单例，再放开随机
- 签名算法务必与后端文档严格对齐（如是否含换行符、是否 trim 空格、是否小写 hex）
