Vue Router 通过拦截+判定+跳转实现精细化权限提示页，依据未登录/角色不足/权限缺失分别跳转至401或403页，并配置meta权限标识、全局守卫校验、专用路由及友好操作入口。
Vue Router 实现无权限访问时的友好提示页跳转，核心在于“拦截 + 判定 + 跳转”，不是简单重定向到 404 或登录页，而是根据权限缺失类型（未登录 / 登录但无角色权限 / 有角色但无具体路由权限）展示对应提示页，比如 401 页面（未认证） 或 403 页面（已认证但无权），并配以清晰文案和操作引导。
配置带权限标识的路由元信息
在定义路由时，通过 meta 字段声明访问门槛，便于后续统一判断：
-
requiresAuth: true—— 表示该页面必须登录才能访问 -
roles: ['admin', 'editor']—— 表示仅指定角色可进入 -
permissions: ['user:read', 'order:edit']—— 表示需具备特定操作权限
示例：
{ path: '/settings', component: Settings, meta: { requiresAuth: true, roles: ['admin'] } }
在全局前置守卫中做权限判定
使用 router.beforeEach 拦截每次跳转，结合用户状态（如 token、角色列表、权限码）进行多层校验：
立即学习“前端免费学习笔记（深入）”；
- 若未登录且目标路由需要认证 → 跳转至登录页，并携带
redirect参数记录原路径 - 若已登录但角色不匹配 → 跳转至
/403提示页 - 若已登录但权限不足（如无编辑权却进了编辑页）→ 同样跳转至
/403，并可在页面内显示更细粒度提示（如按钮置灰+tooltip） - 若请求的是
/401或/403路由本身 → 直接放行，避免死循环
关键代码片段：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
const userRoles = store.state.user.roles || []
if (to.path === '/401' || to.path === '/403') {
next()
return
}
if (to.meta.requiresAuth && !token) {
next({ name: 'Login', query: { redirect: to.fullPath } })
return
}
if (token && to.meta.roles && !to.meta.roles.some(r => userRoles.includes(r))) {
next('/403')
return
}
next()
})
注册专用提示页路由（401 / 403）
在路由表末尾添加独立页面，确保它们不会被其他规则匹配：
- 路径为
/401，对应未认证提示（如“请先登录”） - 路径为
/403，对应已认证但拒绝访问（如“您没有权限访问当前页面”） - 两页都设
hidden: true，不在菜单中显示
注意：403 路由要放在所有业务路由之后、通配符 * 之前，否则会被 { path: '*', redirect: '/404' } 拦截掉。
在提示页中提供实用操作入口
友好 ≠ 被动等待。每个提示页应包含明确的用户可选动作：
-
401 页面：提供“去登录”按钮（
this.$router.push({ name: 'Login', query: { redirect: this.$route.query.redirect || '/' } })） - 403 页面：显示当前用户角色与所需角色对比，附“联系管理员”按钮或跳转工单页链接
- 两页均可加自动倒计时跳转逻辑（如 5 秒后返回首页），提升体验容错性
例如 403 页面模板中可写：
<div class="tip">您当前角色为 "{{ userRole }}"，无法访问 "{{ to.meta.title || to.path }}"</div>
<el-button @click="$router.push('/')">返回首页</el-button>
不复杂但容易忽略：提示页本身也要加 meta: { requiresAuth: false }，避免守卫误判导致无法进入。
