页面权限动态注入的核心是通过后端接口实时拉取用户权限数据，动态生成菜单、路由和按钮控制，支持权限变更时无感刷新。
页面级别权限配置动态注入，核心是让前端菜单、按钮或整个页面的可见性/可访问性，能随用户角色或权限数据实时变化，而不是写死在代码或静态配置里。关键不在于“注入”本身，而在于“谁来决定”“何时更新”“如何生效”。
权限数据从后端动态拉取
页面加载时，前端不应依赖本地缓存的角色字符串或硬编码的权限列表。应主动向后端请求当前用户的完整权限视图，比如一个包含菜单结构、按钮标识、路由白名单的 JSON 对象。
- 接口返回示例：
{"menus":[{"path":"/user","name":"用户管理","perms":["user:list","user:edit"]},{"path":"/order","name":"订单管理","perms":["order:view"]}],"buttons":["user:add","order:export"]} - 建议统一由一个
/api/auth/current-permissions接口提供，后端从数据库或缓存中实时组装，支持角色变更后立即生效 - 该接口需校验登录态（如通过 Token），避免未授权访问
前端路由与菜单按权限动态生成
拿到权限数据后，不能直接渲染所有菜单项，而要过滤出用户有权限的部分，并据此构建路由表和侧边栏菜单。
- Vue Router 或 React Router 支持动态添加路由：用
router.addRoute()或createRoutesFromTree()按需注册 - 菜单组件遍历
menus数组，只展示当前用户perms包含对应权限码的条目 - 注意：路由守卫（如
beforeEach）需同步校验目标路径是否在用户权限范围内，防止手动跳转越权
按钮级权限用指令或高阶组件控制
单个按钮是否显示、是否禁用，应基于细粒度权限码（如 "user:delete"）判断，而非仅靠角色名。
- 封装一个权限指令（如 Vue 的
v-has-perm="'user:delete'"）或 React 的<IfPerm code="user:edit">...组件 - 指令内部检查全局权限列表（来自上一步拉取的数据）是否包含该 code，决定元素是否渲染或置灰
- 避免在每个按钮上手写
v-if="hasPerm('xxx')"，统一抽象可降低维护成本和出错概率
权限变更时触发重新拉取与刷新
用户在系统内切换角色、管理员实时授予权限后，页面不能仍沿用旧权限数据。
- 后端修改权限后，可通过 WebSocket 或短轮询通知前端“权限已更新”
- 前端监听到事件，立即调用
/api/auth/current-permissions刷新本地权限快照 - 随后触发菜单重绘、路由重匹配、按钮状态重计算——整个过程对用户透明，无需刷新页面
