Vue 3 中请求拦截器怎么在发送前对查询参数进行签名校验-Vue.js-PHP中文网

vue 3中请求拦截器负责生成并附加签名而非校验，需按约定算法对路径、方法、时间戳、随机串、排序后query及body摘要等要素有序拼接签名，并通过请求头注入；query参数必须规范化处理且参与签名。

vue 3 中请求拦截器怎么在发送前对查询参数进行签名校验

在 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）