应统一在 Axios 响应拦截器中捕获强制升级信号，结合状态码、响应头、响应体字段识别；触发可交互 UI 通知而非立即刷新，并与定时轮询/Service Worker 协同检测，通过 localStorage + storage 事件实现多标签页防重复提示。
在 Vue 3 项目中，服务端返回强制升级提示（比如 HTTP 响应头含 X-Force-Update: true，或响应体中带 code: 999 类升级标识），不应由业务组件各自判断处理，而应统一在 Axios 响应拦截器中捕获并触发全局更新流程。
拦截器中识别强制升级信号
常见识别方式有三种，建议组合使用：
- 检查响应状态码：如 503 Service Unavailable 且响应体含
{"code": 999, "msg": "请刷新页面以应用新版本"} - 检查自定义响应头：X-Force-Update === 'true' 或 X-App-Version 与本地不一致（需提前缓存本地版本）
- 检查响应体字段：约定后端在所有接口的 data 结构中统一携带
upgradeRequired: true字段（适用于全量接口可控场景）
拦截后不立即刷新，而是触发通知
直接调用 window.location.reload() 会中断用户操作、丢失表单内容、破坏体验。正确做法是：
- 将升级提示转为可交互的 UI 通知（如 Element Plus 的
ElMessage或自定义弹窗） - 通知文案明确说明原因：“系统已更新，部分功能需刷新后生效”
- 提供两个按钮：“稍后提醒”（关闭并延迟 5 分钟再检）和“立即刷新”（执行
location.reload(true)） - 若用户处于编辑态（如表单未提交、富文本正在输入），默认禁用“立即刷新”，仅保留“稍后提醒”
配合前端版本检测机制使用
单独依赖响应拦截器不够健壮——它只在发请求时触发，而用户可能长时间停留在首页不发任何请求。因此必须与主动检测方案协同：
立即学习“前端免费学习笔记（深入）”；
- 拦截器捕获的是“被动发现”的升级信号（服务端主动下发）
- 前端仍需定时轮询
/version.json或监听serviceWorker.controllerchange（PWA 场景） - 两者逻辑统一入口：无论哪种方式检测到升级，都调用同一个
triggerAppUpdate()函数，避免重复弹窗
防止重复提示与多标签页同步
用户可能开多个标签页，避免每个页都弹窗：
- 使用
localStorage记录最近一次提示时间戳，同域名下各页读取比对 - 通过
storage事件监听其他标签页是否已触发提示，本页收到则跳过 - 提示弹窗打开后，设置
localStorage.setItem('updatePromptShown', Date.now().toString()) - 拦截器中先检查
localStorage.getItem('updatePromptShown')是否在 10 分钟内，是则跳过本次提示
