路由元信息（meta）是Vue Router中轻量灵活的权限控制载体，通过在路由配置中定义requiresAuth、roles等字段，结合全局前置守卫校验登录状态与角色，实现页面访问控制、标题设置等功能。
路由元信息（meta）是 Vue Router 中最轻量、最灵活的权限控制载体。它不改变路由结构，也不依赖额外插件，只需在路由配置里加个对象，再配合导航守卫就能实现登录校验、角色拦截、页面标题设置等常见需求。
在路由配置中定义 meta 权限字段
每个路由对象都支持 meta 字段，你可以自由约定字段名和值。常见用法包括：
- requiresAuth：布尔值，标识该页面是否需要登录才能访问
-
roles：字符串数组，列出允许访问该路由的角色（如
['admin', 'editor']） - guestOnly：布尔值，表示仅未登录用户可访问（如登录页、注册页）
- title：用于设置页面标题，也可作为权限上下文的一部分
示例：
const routes = [
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true, roles: ['admin', 'user'] } },
{ path: '/admin/users', component: UserList, meta: { requiresAuth: true, roles: ['admin'] } },
{ path: '/login', component: Login, meta: { guestOnly: true } }
]
通过全局前置守卫做权限拦截
router.beforeEach 是执行权限判断的核心位置。它能拿到目标路由 to 的全部 meta 信息，再结合当前用户状态（比如从 Pinia/Vuex 或 localStorage 获取）做出放行或跳转决策。
立即学习“前端免费学习笔记（深入）”；
关键逻辑顺序通常为：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 检查
to.meta.requiresAuth是否为真 → 若是，继续判断登录状态 - 若已登录，再检查
to.meta.roles是否包含当前用户角色 - 若未登录或角色不匹配，重定向到
/login或/forbidden - 遇到
to.meta.guestOnly且用户已登录，直接跳转到首页或仪表盘
正确访问和合并 meta 数据
to.meta 是 Vue Router 提供的快捷访问方式，但它只做**浅合并**：子路由的同名字段会覆盖父路由的值，不会自动合并数组或对象。
例如：
- 父路由
meta: { permissions: ['read'] } - 子路由
meta: { permissions: ['write'] } - 结果
to.meta.permissions是['write']，不是['read', 'write']
因此：
- 简单开关类字段（如
requiresAuth）直接用to.meta.requiresAuth - 需累加或跨层级判断的字段（如权限列表），应遍历
to.matched数组 - 写法示例：
to.matched.some(r => r.meta.requiresAuth)更健壮
搭配动态路由提升安全性
静态路由 + meta 适合基础权限控制，但真正敏感的后台菜单应配合动态路由：登录后根据用户角色从后端拉取可访问的路由列表，再用 router.addRoute() 注入。
此时 meta 依然有效 —— 它随动态路由一同注入，可在守卫中统一校验，也能用于菜单渲染时过滤不可见项。
注意：动态添加的路由不会自动出现在初始 router.options.routes 中，但 to.matched 和 to.meta 仍可正常访问。
