未授权访问应实现“拦截+提示+重定向”闭环：先调用ElMessage等UI库显示精准提示（区分未登录与权限不足），在onClose回调中执行next重定向，并通过路由query保留原路径供登录后回跳，提示逻辑须封装为Composition API或Pinia action，避免守卫直接操作DOM。
遇到未授权访问时，导航守卫本身不负责弹窗提示，但可以配合状态管理与 UI 组件实现“拦截 + 提示 + 重定向”三步闭环。关键不是只跳转，而是让用户清楚“为什么被拦、接下来该做什么”。
在守卫中触发提示并控制跳转节奏
不要让 next() 和提示逻辑混在一起。推荐做法是：先显示提示（如 Toast 或 Modal），等用户确认或自动延时后，再执行重定向。
- 使用
ElMessage、Antd notification等 UI 库主动唤起轻量提示，例如“请先登录才能访问该页面” - 提示后调用
next({ path: '/login', query: { redirect: to.fullPath } })，保留原路径用于登录后回跳 - 避免在提示未关闭时就跳转，否则提示可能一闪而过——可在提示的
onClose回调里调用next
区分未登录与权限不足，提示语更精准
同一“未授权”，原因不同，提示也应不同。守卫可通过路由元信息和用户状态做细粒度判断：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
未登录：检查
!store.getters.isLoggedIn→ 提示“请登录后继续” -
已登录但无角色权限：检查
to.meta.roles是否包含当前用户角色 → 提示“您暂无访问权限，请联系管理员” - 接口返回 403：可在组件内请求失败后触发全局事件，由统一提示系统响应，而非在守卫里硬编码
避免守卫中直接操作 DOM 或挂载组件
导航守卫是纯逻辑层，不适合直接 document.createElement 或 new Vue(...).$mount()。正确方式是：
立即学习“前端免费学习笔记（深入）”；
- 将提示逻辑封装为可复用的 Composition API 函数（如
useAuthPrompt()），内部调用getCurrentInstance()获取上下文 - 或通过 Pinia/Vuex 触发一个
auth/promptaction，由 App 根组件监听并渲染提示层 - 确保提示组件能响应式关闭，并支持手动取消跳转（比如“稍后再说”按钮暂停重定向）
登录页需兼容 redirect 恢复逻辑
重定向目标页（如 /login?redirect=/admin）必须在登录成功后正确解析并跳转，否则提示就失去意义：
- 登录组件中读取
$route.query.redirect，校验是否为合法内部路径（防 XSS 和开放重定向） - 登录成功后调用
router.push(redirectPath || '/')，而不是硬编码跳首页 - 若 redirect 为空或非法，跳转到默认工作台，同时清除 query 参数避免重复携带
