Vue 3 中 Axios 怎么对发送的请求参数进行防篡改签名-Vue.js-PHP中文网

vue 3 中 axios 请求防篡改签名需绑定时间戳、业务参数和密钥三要素，前端通过拦截器生成并注入 x-signature 和 x-timestamp 请求头，后端同步验签确保参数未被篡改、时效性及防重放。

vue 3 中 axios 怎么对发送的请求参数进行防篡改签名

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)
}
```

然后在 Axios 实例的请求拦截器中调用：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

```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
```