---
name: jjb-permission-usage
description: 定义 JJB Permission 装饰器使用方式。在使用 Permission 包裹组件、permission 方法检查按钮权限时查阅。
---

# 按钮权限控制规范

## 权限控制方式

系统使用 **Permission** 装饰器获取当前页面的按钮权限列表。

## Permission 使用方式

- **导入方式**：

  ```javascript
  import { Permission } from '@cqsjjb/jjb-common-decorator/permission';
  ```

- **使用方式**：使用装饰器语法包裹组件

  ```javascript
  import React from 'react';
  import { Permission } from '@cqsjjb/jjb-common-decorator/permission';

  function UserList(props) {
    const { permission } = props;
    
    return (
      <div>
        {permission('reslib-app-resource-add') && <Button>新增</Button>}
        {permission('reslib-app-resource-edit') && <Button>编辑</Button>}
        {permission(['reslib-app-resource-add', 'reslib-app-resource-edit']) && <Button>批量操作</Button>}
      </div>
    );
  }

  // 使用 Permission 装饰器
  export default Permission(UserList);
  ```

- **注入的 Props**：

  - `permission(code)`：按钮权限检查方法

    - 参数 `code`：按钮权限码（字符串）或按钮权限码数组

    - 返回值：`boolean`，表示是否有按钮权限

    - 数组参数：传入数组时，只要数组中任意一个按钮权限码存在即返回 `true`

- **调试开关 `disabled`**：

  Permission 装饰器第二个参数支持 `{ disabled?: boolean }` 配置，**默认值为 `false`**（权限控制正常启用）。

  当需要临时关闭权限控制进行调试时，传入 `{ disabled: true }`，此时 `permission` 方法始终返回 `true`，无需注释代码：

  ```javascript
  // 正常启用权限控制（disabled 默认 false，可省略）
  export default Permission(UserList);

  // 临时关闭权限控制（调试用），此时 permission 方法始终返回 true
  export default Permission(UserList, { disabled: true });
  ```

  > ⚠️ **注意**：`disabled: true` 仅用于本地调试，调试完成后必须恢复为正常模式，**禁止将 `disabled: true` 提交到代码仓库**。

- **权限码说明**：

  - 权限码格式：`appId-页面-操作语义`（全小写），与底座平台注册的按钮 `perms` 字段一致

  - 权限码注册流程见 [[jjb-button-permission-registration]]