未授权访问应实现“拦截+提示+重定向”闭环：先调用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/prompt action，由 App 根组件监听并渲染提示层
• 确保提示组件能响应式关闭，并支持手动取消跳转（比如“稍后再说”按钮暂停重定向）

登录页需兼容 redirect 恢复逻辑

重定向目标页（如 /login?redirect=/admin）必须在登录成功后正确解析并跳转，否则提示就失去意义：

• 登录组件中读取 $route.query.redirect，校验是否为合法内部路径（防 XSS 和开放重定向）
• 登录成功后调用 router.push(redirectPath || '/')，而不是硬编码跳首页
• 若 redirect 为空或非法，跳转到默认工作台，同时清除 query 参数避免重复携带

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