Vue 3 请求拦截器应优先使用服务端下发的 Device-ID 并注入 X-Device-ID 等请求头，Web 端通过 localStorage 持久化，混合 App 调用原生 API，禁用 userAgent 鉴权，响应拦截器需处理设备异常状态。
在 Vue 3 项目中，请求拦截器添加自定义设备信息（如 Device-ID、OS-Version、App-Version 等）到请求头，核心是：在请求发出前，从运行环境准确读取设备标识，并统一注入到每个请求的 headers 中。
获取设备信息的常见来源
实际可用字段取决于你的部署场景：
-
Web 浏览器环境：可取
navigator.userAgent、navigator.platform，或用localStorage/sessionStorage存储服务端下发的唯一设备 ID（推荐） - 混合 App（如 Capacitor / Cordova）：调用原生插件 API 获取真实设备 ID、系统版本等
-
小程序（如 uni-app）：使用
uni.getSystemInfoSync()或平台专属 API - 已由后端分配设备指纹：首次登录/启动时由接口返回，存入本地并复用
在请求拦截器中注入设备字段
以标准 Axios 封装为例，在 request.interceptors.request.use 中操作：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
request.interceptors.request.use((config) => {
// ✅ 1. 设备 ID（优先使用服务端下发的，避免用易伪造的 userAgent）
const deviceId = localStorage.getItem('device_id') || 'web-' + Date.now()
// ✅ 2. 系统与浏览器信息（仅作参考，不用于鉴权）
const ua = navigator.userAgent
const platform = navigator.platform
// ✅ 3. 注入到请求头（按后端约定的字段名，例如 X-Device-ID）
config.headers['X-Device-ID'] = deviceId
config.headers['X-User-Agent'] = ua
config.headers['X-Platform'] = platform
return config
}, (error) => Promise.reject(error))
注意事项与最佳实践
避免踩坑的关键细节：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
navigator.userAgent做权限控制——它可被任意修改，仅适合日志或统计 - 设备 ID 必须全局唯一且稳定，Web 端建议首次访问时调用
/v1/device/init接口生成并持久化存储 - 若使用 Pinia 管理设备状态，可在拦截器中
const deviceStore = useDeviceStore()同步读取 - 敏感字段（如硬件序列号）不可在纯前端获取，需由原生层桥接或服务端签发
- 确保后端接收字段名与前端设置完全一致（大小写、中划线/下划线），否则会被忽略
配合响应拦截器做设备异常处理
当后端检测到设备异常（如设备被封禁、多端强登），通常会返回特定状态码（如 423 Locked 或自定义 code=4003），可在响应拦截器中统一处理：
- 清除本地设备 ID 和 token
- 跳转至设备异常页或引导重新初始化
- 上报日志供运维排查
