页面权限分级的核心是将权限标识写入路由meta字段，并在router.beforeeach中校验用户权限，不满足则跳转或拦截。
用路由元信息 meta 做页面权限分级，核心就一句话：把权限标识（比如角色、功能码、访问级别）写进路由配置的 meta 字段，再在全局前置守卫中比对当前用户权限，不满足就跳转或拦截。
一、在路由定义里加权限标识
每个需要控制访问的路由，都通过 meta 注入权限要求。常见写法有几种：
-
角色白名单：
meta: { roles: ['admin', 'editor'] }—— 只有这些角色能进 -
功能码控制：
meta: { permissions: ['user:list', 'user:delete'] }—— 需至少拥有其中一个权限 -
访问级别：
meta: { level: 2 }—— 用户 level ≥ 2 才允许访问 -
免登录页可直接放：
meta: { public: true }，登录页、404、首页等不用鉴权
二、在 router.beforeEach 中做权限校验
这是最关键的一步。拿到用户登录后存的权限信息（如 store.state.user.roles 或 localStorage.getItem('permissions')），和目标路由的 to.meta 对比：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 如果
to.meta.public === true，直接next() - 如果用户未登录（无 token / 无用户信息），跳转登录页：
next({ path: '/login', query: { redirect: to.fullPath } }) - 检查权限：比如判断
user.roles是否包含to.meta.roles中任一值；或user.permissions是否与to.meta.permissions有交集 - 不通过就跳
/403或主页面：next({ path: '/403' })
三、配合菜单动态渲染（可选但实用）
只控制路由还不够，菜单也得“看人下菜”。遍历你定义的完整路由表，用同样逻辑过滤出当前用户能看见的路由（route.meta.roles 匹配成功且非隐藏）：
- 加个
meta.hidden: true标记不显示在菜单的路由（如详情页、重定向页） - 菜单项只渲染
meta.title和meta.icon，链接指向route.name或path - 注意：不要在菜单里暴露用户没权限的路由，否则可能被手动输地址绕过（所以路由守卫仍是必须的）
四、注意事项和避坑点
简单不等于随便，这几个细节容易出问题：
- 权限数据必须可靠：从后端接口获取，别只靠前端 localStorage 拼凑；每次登录/刷新都要重新拉一次权限列表
- 路由守卫是最后防线：即使菜单没显示某页，用户仍可能输入 URL 访问，守卫必须严格校验
-
避免硬编码角色名：统一管理权限常量，比如
const ROLES = { ADMIN: 'admin', EDITOR: 'editor' } -
异步权限场景要处理好：如果权限数据需异步获取（比如登录后调 API），可在守卫里先
next(false)，等数据回来再next({ ...to })（需配合 router.replace 防止重复触发）
不复杂但容易忽略——meta 是 Vue Router 提供的轻量钩子，权限分级不需要引入复杂框架，把标识、校验、反馈三步串起来，就能支撑中小项目的基础访问控制。
