权限按钮显隐核心是根据用户角色动态控制渲染或禁用：可用props传角色/权限标识直接判断、用visible+disabled双属性细粒度控制、封装校验逻辑至组件内部、或通过指令/HOC复用，且需响应式更新。
权限按钮的显隐，核心是根据用户角色动态控制组件是否渲染或禁用。Props 是最直接、轻量的方式——把角色信息或权限标识作为属性传入按钮组件，在内部做判断即可。
用 role 或 permissions Prop 控制渲染
在父组件中，根据当前用户角色（如 "admin"、"editor"、"viewer"）决定是否传入按钮组件。按钮组件内部通过 props.role 或 props.permissions 判断是否显示：
- 父组件传入：
<ActionBtn role="admin" />或<ActionBtn permissions={['create', 'delete']} /> - 子组件内用
v-if（Vue）或{props.role === 'admin' && <button>...（React）控制是否挂载 - 适合差异大、完全不需要渲染的场景（比如普通用户根本看不到“删除”按钮）
用 disabled + visible 双 Prop 做细粒度控制
有些场景下按钮需要始终存在（比如保持布局稳定），但需区分「不可见」和「不可点」：
- 传入
visible控制是否显示（v-show或style.display） - 传入
disabled控制是否可交互（同时配合样式置灰） - 例如：
<ActionBtn :visible="hasPerm('edit')" :disabled="!hasPerm('edit')" /> - 避免因隐藏导致页面重排，也方便后续加 tooltip 提示“无权限”
封装权限校验逻辑到 Button 组件内部
把权限判断从父组件下沉，让按钮更“智能”。可以接受角色、权限码、API 能力名等任意一种标识：
- 支持多种传参方式：
role="admin"、perm="user:delete"、api="/api/users" method="DELETE" - 组件内部调用统一权限检查函数（如
checkPermission(perm)），返回布尔值 - 配合 provide/inject 或 Pinia/Vuex 共享权限状态，避免重复传 props
结合指令或高阶组件增强复用性（进阶）
当项目中权限判断频繁出现，可进一步抽象：
- Vue 中定义
v-has-perm="'post:publish'"指令，自动控制元素显隐 - React 中写一个
withPermission(Button)高阶组件，包裹后自动注入权限逻辑 - 注意：指令/HOC 应只负责控制显隐，权限数据仍建议由上层注入（如全局 store），不耦合 API 请求
不复杂但容易忽略的是权限更新时机——用户切换角色后，要确保按钮响应式更新。用响应式状态（ref/reactive 或 useState/useReducer）驱动，避免硬编码静态值。
