用Provide实现菜单过滤的核心是将响应式权限数据（如ref包裹的userPermissions）跨层级注入菜单组件，结合菜单项的permission字段动态渲染，并配合路由守卫做二次校验。
用 Provide 实现菜单过滤，核心是把用户权限信息（如角色、可访问路由列表）作为响应式数据，通过 provide/inject 跨层级下发到菜单组件中，再结合权限规则动态渲染。
权限数据需提前注入并保持响应式
在根组件或布局组件中调用 provide，传入从登录接口获取的权限信息。注意必须用 ref 或 reactive 包裹，否则子组件 inject 后无法触发更新：
- 推荐用
ref包裹权限数组（如const userPermissions = ref(['user:list', 'order:edit'])） - 避免直接 provide 普通对象或字符串，否则后续修改不会触发菜单重渲染
- 若权限依赖异步加载（如登录后请求权限），确保
provide在数据就绪后再执行，或使用computed做一层包装
菜单配置需携带权限标识字段
菜单数据（常来自静态配置或后端返回）应包含明确的权限字段，比如 meta?.permission 或 requiredPermission：
- 示例：一个菜单项
{ path: '/users', name: 'UserList', meta: { permission: 'user:list' } } - 支持多权限时可用数组：
meta: { permission: ['user:list', 'user:export'] }，表示需同时满足 - 不设该字段的菜单默认放行（或按业务约定设为公共菜单）
菜单组件内用 inject 获取并过滤
在实际渲染菜单的组件（如 Sidebar.vue 或 MenuList.vue）中，inject 权限数据，并在 v-for 中做条件判断：
- 用
computed生成过滤后的菜单列表，避免模板中写复杂逻辑 - 判断逻辑示例：若菜单要求
'user:list'，检查userPermissions.value.includes('user:list') - 支持数组权限时，可用
required.every(p => userPermissions.value.includes(p)) - 注意处理嵌套菜单：递归过滤子菜单，空子菜单可自动隐藏整项
配合路由守卫做二次校验更稳妥
provide/inject 主要解决视图层菜单显隐，但不能替代路由级权限控制：
- 在
router.beforeEach中同样 inject 权限，拦截无权访问的路由跳转 - 菜单可见 ≠ 可访问；用户可能手动输入 URL 或通过其他入口进入
- 建议菜单过滤 + 路由守卫 + 接口层 RBAC 三者结合，形成完整权限链
