Vue 3 中 Axios 请求参数自动加密需通过请求拦截器实现，推荐 crypto-js + AES-CBC 模式，密钥与 IV 由环境变量或动态下发，支持接口粒度控制（如 config.encrypt 标识），并应叠加时间戳、nonce 和签名防重放，响应可选解密。

在 Vue 3 中，对 Axios 请求参数做自动加密，核心是利用 请求拦截器（request interceptor） 统一处理数据，避免每个接口手动加解密。关键不在于“能不能”，而在于“怎么加得安全、可控、可维护”。

用 crypto-js + AES 在请求拦截器中加密

这是最常用、前后端配合度高的方式。推荐使用 CBC 模式 + PKCS7 填充 + 固定 IV（或服务端约定的 IV），密钥由前后端预先协商好（切勿硬编码在前端源码中，应通过环境变量或动态下发）。

• 安装依赖：npm install crypto-js
• 封装加密工具（例如 utils/crypto.js）：

  import CryptoJS from 'crypto-js'
  
  const KEY = CryptoJS.enc.Utf8.parse(import.meta.env.VUE_APP_CRYPTO_KEY || '16charskey1234567')
  const IV = CryptoJS.enc.Utf8.parse(import.meta.env.VUE_APP_CRYPTO_IV || '16charsiv1234567')
  
  export function encrypt(data) {
    const json = JSON.stringify(data)
    const encrypted = CryptoJS.AES.encrypt(json, KEY, {
      iv: IV,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    })
    return encrypted.toString()
  }
  
  export function decrypt(ciphertext) {
    const decrypted = CryptoJS.AES.decrypt(ciphertext, KEY, {
      iv: IV,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    })
    return JSON.parse(decrypted.toString(CryptoJS.enc.Utf8))
  }

• 在 Axios 实例的请求拦截器中调用加密：

  axios.interceptors.request.use(config => {
        if (config.method === 'post' && config.data && typeof config.data === 'object') {
          config.data = { encrypted: encrypt(config.data) }
        }
        return config
      })

  这样所有 POST 请求体都会被加密后塞进 { encrypted: "..." } 字段发送。

按接口粒度控制是否加密

不是所有接口都需要加密（比如公开的轮播图、公告）。可在请求配置中加自定义标记，让拦截器智能跳过：

• 发起请求时带上标识：

  this.$http.post('/api/login', { username, password }, {
        encrypt: true // 自定义配置项
      })

• 拦截器中判断：

  axios.interceptors.request.use(config => {
        if (config.encrypt && config.data && typeof config.data === 'object') {
          config.data = { encrypted: encrypt(config.data) }
        }
        return config
      })

配合签名防重放和篡改（增强安全性）

仅加密不够——攻击者截获密文仍可重放。建议叠加时间戳 + 签名机制：

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

• 在加密前，给原始参数加上 timestamp 和随机 nonce
• 用 MD5/SHA256 对 appKey + timestamp + nonce + JSON.stringify(data) 生成 sign
• 把 timestamp、nonce、sign 和加密后的 encrypted 一起发给后端
• 后端校验时间戳有效期（如 5 分钟）、nonce 是否已用过、签名是否匹配

注意解密响应（可选但推荐）

如果后端返回的数据也做了加密（比如敏感字段），可在响应拦截器中统一解密：

• 约定响应结构，例如：{ code: 200, data: { encrypted: "xxx" } }
• 拦截器中提取并解密：

  axios.interceptors.response.use(res => {
        if (res.data?.data?.encrypted) {
          res.data.data = decrypt(res.data.data.encrypted)
        }
        return res
      })

实际落地时，加密逻辑要和后端严格对齐：密钥长度、IV 生成方式、填充模式、编码格式（Base64？Hex？）。测试阶段务必用真实密文与后端联调验证，不能只看前端 console.log。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！