Vue 导航守卫如何配合路由元信息 meta 实现细粒度的页面权限校验

Vue导航守卫配合meta实现细粒度权限校验，关键在于分层落地：路由级拦截（守卫读取meta做统一判断）、组件级响应（setup中useRoute().meta动态控制按钮/菜单显示）、动态路由生成（按meta.permissionKey过滤并addRoute），同时需规避仅依赖前端meta、角色不一致、路由复用时meta未更新等陷阱。

Vue 导航守卫配合路由元信息 meta 实现细粒度权限校验，关键在于把权限逻辑分层落地：既控制能否进入页面（路由级），也支撑页面内按钮、菜单、API 调用等是否显示或可用（组件级）。核心不是只写一个 beforeEach，而是让 meta 成为权限策略的“声明式接口”，再由守卫和组件协同消费。

路由级拦截：用 meta 声明需求，守卫做统一判断

在路由配置中通过 meta 明确标注权限要求，比如登录态、角色白名单、权限码列表：

1. requiresAuth: true —— 表示必须已登录
2. roles: ['admin', 'editor'] —— 表示仅限指定角色访问
3. permissions: ['user:read', 'order:edit'] —— 表示需具备具体操作权限

全局前置守卫读取这些字段，结合当前用户状态（如从 Pinia/Vuex 或 localStorage 获取）做同步或异步校验：

1. 未登录且需认证 → 重定向到登录页，并携带 redirect 参数
2. 已登录但角色不匹配 → 跳转到 403 页面
3. 权限码缺失 → 同样拒绝导航，避免用户“进得去但干不了事”

组件级响应：在 setup 或模板中读取 $route.meta

页面加载后，组件可通过 $route.meta（Options API）或 useRoute().meta（Composition API）获取当前路由的元信息。这不是重复校验，而是实现动态渲染的基础：

1. 按钮是否显示：v-if="route.meta.permissions?.includes('post:publish')"
2. 菜单项是否激活：:class="{ active: route.meta.activeMenu === 'settings' }"
3. 表单字段是否禁用：:disabled="!route.meta.permissions?.includes('config:write')"

注意：这种判断依赖前端已有权限数据。若权限来自异步接口（如登录后拉取），需确保组件在权限就绪后再渲染，避免闪动或误判。

动态路由生成：让 meta 驱动可访问路由列表

更进一步的做法是——不把所有路由都提前注册，而是根据用户权限动态生成路由表。此时 meta 是路由配置的“原始凭证”：

1. 后台返回用户拥有的权限码列表（如 ['dashboard', 'user:list', 'log:read']）
2. 前端遍历原始路由数组，过滤出 meta.permissionKey 在该列表中的项
3. 调用 router.addRoute() 动态添加，或用 router.resetRouter() 清空后重建

这种方式天然规避了“路由存在但无权限”的隐患，也便于配合菜单自动渲染，且对 SEO 友好（服务端可预渲染实际可见路由）。

避免常见陷阱：meta 不是万能钥匙

meta 是静态声明，不能替代真实权限校验。几个易忽略点：

1. 不要仅靠前端 meta 控制敏感操作——按钮隐藏了，接口仍可能被手动调用，必须配合后端鉴权
2. meta 中的角色或权限码应与后端定义严格一致，建议统一管理在常量文件中
3. 路由复用时（如 /user/:id），to.meta 不会随参数变化，需额外结合 to.params 或接口返回做上下文判断
4. 动态添加的路由，其 meta 字段需确保序列化安全，避免注入风险