403权限不足是已认证用户因角色权限限制被拒，非登录态问题；拦截器需区分场景提示、保留上下文，请求前预判越权、响应后按code分类处理，并配合前端权限控制与友好提示。
403 权限不足不是登录态问题，而是当前用户身份有权限限制——比如普通用户访问管理员接口。拦截器里不能简单跳登录页，而要区分场景、给出明确提示，并保留用户当前操作上下文。
请求拦截器：提前规避 403 风险
在请求发出前，可结合路由或接口元信息做轻量级权限预判：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 为需要特定角色的 API 请求添加自定义 header，例如 config.headers['X-Required-Role'] = 'admin'，后端据此校验并返回更精准的错误码（如 403.1）
- 在请求拦截中检查当前用户角色（如从 Pinia store 获取），对明显越权的请求提前拦截，直接调用统一提示函数：ElMessage.warning('暂无权限执行此操作')，不发请求
- 避免在登录页、免鉴权接口（如 /public/menu）上自动注入 token 或权限头
响应拦截器：捕获 403 并分类处理
403 响应需细粒度识别原因，不能一概而论：
- 检查 error.response.status === 403，再读取响应体中的 error.code 或 message 字段（如后端返回
{"code": 40301, "msg": "缺少菜单权限"}） - 对常见子类型做差异化提示：40301 → “您没有访问该页面的权限”；40302 → “您没有执行该操作的权限”；纯 403 无明细 → “当前操作受限，请联系管理员”
- 不自动跳转或清状态，保留用户所在页面和表单数据；必要时可触发弹窗引导申请权限，而非强制退出
配套建议：让提示更友好
光弹消息不够，体验要再进一步：
- 使用 ElMessageBox 替代 ElMessage 对关键操作类 403（如删除、发布）做二次确认式提示，附带“联系管理员”按钮
- 在菜单/按钮组件中，通过 v-if="hasPermission('sys:user:delete')" 提前隐藏无权项，从源头减少 403 触发可能
- 记录 403 请求路径和用户角色到日志（非敏感环境），便于后续权限配置优化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
