路由 meta 不直接控制按钮显隐，而是通过 btnPermissions 字段提供权限依据；结合路由守卫预加载权限、v-permission 指令比对渲染，实现安全可控的按钮权限管理。
路由 meta 本身不直接控制按钮显隐，但它能为按钮权限提供结构化依据——关键在于把权限标识从路由元信息传递到组件，并在模板中做轻量判断。自定义指令 + 路由守卫是成熟、低侵入、易维护的组合方案。
一、在路由 meta 中声明按钮权限字段
不要把按钮逻辑写死在路由配置里，而是用语义清晰的字段承载权限数据：
- 推荐用数组形式声明页面级按钮权限，例如：meta: { btnPermissions: ['user:add', 'user:delete', 'order:export'] }
- 字段名保持统一（如固定用 btnPermissions），避免不同路由用不同 key 导致指令无法通用
- 权限值应与后端返回的权限码完全一致，不建议前端二次映射或缩写
- 若后端返回的是数字编码（如 [1, 3, 5]），也统一存入该字段，指令内部按需兼容即可
二、用全局守卫预加载并透传权限上下文
用户登录后，权限数据通常已存在 store 或 localStorage 中。路由守卫的作用不是重复校验，而是确保组件能稳定读取：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 在 router.beforeEach 中，将当前用户的完整权限列表挂载到 to.meta.userPermissions 或注入 Pinia store
- 不建议每次跳转都重新请求权限接口；首次登录加载后缓存，后续仅在角色变更时刷新
- 避免在守卫中做按钮级判断——那是组件层的事；守卫只负责“准备好数据”，不越权“决定显示”
三、编写 v-permission 自定义指令完成渲染控制
指令接收权限标识，比对后决定是否保留在 DOM 中：
- 指令值支持字符串（v-permission="'user:delete'"）或数组（v-permission="['user:add','user:edit']"）
- 内部读取 $route.meta.userPermissions（或从 store 获取），执行包含判断：userPermissions.includes(value)
- 无权限时调用 el.parentNode.removeChild(el) 彻底移除节点，比 v-if 更干净，且不影响父组件生命周期
- 可扩展：增加 disabled 模式（如加 modifier v-permission.disabled），用于灰化而非隐藏
四、使用时注意边界与安全补位
指令解决的是“视觉层”控制，不能替代服务端防护：
- 敏感操作按钮（如删除、提交）必须配合接口层权限校验，防止用户手动调用 API
- 不要把权限数组存在 localStorage 中供指令直接读取——易被篡改；应通过响应式 store 或 route meta 安全透传
- 同一页面多个按钮共用相同权限时，指令可复用；若需差异化控制（如“导出”需额外校验数据状态），应在组件内用 usePermission() 组合式函数补充逻辑
- 服务端若返回了按钮级配置（如 buttons: ['edit','audit']），可将其注入 meta.buttons，再配合指令循环渲染：<button v-for="b in $route.meta.buttons" :key="b" v-permission="b">{{ b }}</button>
