前端权限控制

注意：在 hzero-front@1.0.2 及以上的版本中，权限组件的控制逻辑调整为：

不分配权限时(角色管理-分配权限中不勾选权限)，不显示UI组件

分配了权限后((角色管理-分配权限中勾选权限))，如若设置了菜单配置中对应权限集的控制类型为禁用，则UI组件显示并且是禁用状态，否则显示权限组件

01. 说明

1.1 前端权限组件

可以根据需求控制按钮、表单域禁用/隐藏状态，表格列的显示/隐藏。

页面控制组件：Button、FormItem、Fields、TablePermission；

在页面加载时，根据权限组件的permissionList属性设置的权限集编码进行鉴权。

其中 Button、FormItem 除了新增 permissionList 属性外与原生的 hzero-ui 组件无异，可以代替原生的 Button、FormItem 来使用；

同时，现在只有 Button 支持 c7n-ui 的按钮组件

1.2 权限集编码

系统中将有两种权限集编码，一种是与页面权限控制相关的，一种是与API相关的；

1.2.1 API 相关

即菜单配置功能中的权限集，可手动维护。

1.2.2 页面相关

前端权限控制相关，在开发页面时由前端定义**（前端页面路由+自定义的code）**，将会自动导入到数据库中，导入之后可设置权限集的控制方式，不可更改编码。

1.2.2.1 权限集编码编写方式

权限组件的权限集编码由前端开发来确定，这里给出推荐的编写方式。

permissionList 属性需是以下结构：

// 经过 connect 的组件可获取到 match 对象 
const { match: { path } } = this.props;

[
  {
    // 页面路由+实际权限集编码
    code: `${path}.button.create`,
    type: 'button',
    meaning: '银行定义-新建',
 },
]

code = 前端路由（match.path） + 权限组件类别（button | table | formItem | fields）+ 具体的含义（新建：create | 编辑： edit）；

meaning = 功能页面菜单名称 + 权限集的含义；

例如：

// 按钮类型
code: `${path}.button.create`,

// 表格
code: `${path}.table.publishedByUser`,

// 表单域
code: `${path}.fields.edit`,

1.4 分配权限

前端会通过 check-permissions 接口进行鉴权，该接口返回示例如下：

approve 为 false 则表示无权限，权限组件将会根据接口返回的 controllerType 字段来控制相应的组件是禁用或者隐藏。

{
  code: "hiam.permission-demo.save",
  approve: false,
  controllerType: "hidden"
}

权限控制类型设置

controllerType 的值来自菜单配置-权限集中的设置。

权限控制

approve 的值来自角色管理-分配权限，**勾选(true)**表示有权限，权限组件不会做任何控制，**不勾选(false)**则相反。

注意：在 hzero-front@1.0.2 及以上的版本中，权限组件的控制逻辑调整为：

不分配权限时(角色管理-分配权限中不勾选权限)，不显示UI组件

分配了权限后((角色管理-分配权限中勾选权限))，如若设置了菜单配置中对应权限集的控制类型为禁用，则UI组件显示并且是禁用状态，否则显示权限组件

02. API

所有的权限控制组件都具有该属性，其余的属性与hzero-ui上的原生组件无异（Fields除外）。

参数	说明	类型	默认值	必输
permissionList	权限集编码列表，可以验证多个权限，当其中一个权限验证成功，权限验证的结果则是成功	`object[]`	无	是

03. 使用示例

Button 组件

控制按钮类型的权限，如果是文字按钮（a标签），需要设置type="text"，如果是c7n-ui，需要设置type="c7n-pro"

1. 引入 Button 组件

  import { Button } from 'components/Permission';

1. 设置 permissionList 属性

  <Button
    permissionList={[
      {
        code: `${path}/save`,
        type: 'button',
        meaning: '银行定义-保存',
      },
    ]}
    onClick={this.handleSaveStorage}
  >
    {intl.get('hzero.common.button.save').d('保存')}
  </Button>

1. 文字按钮

当想要控制文字类型按钮的权限，比如 Table 内的 a 标签，设置 type 属性为 text，其余的属性与 a 标签使用时无异。

  <Button
    type="text"
    permissionList={[
      {
        code: `${path}.button.save`,
        type: 'button',
        meaning: '银行定义-保存',
      },
    ]}
    onClick={() => this.handleSave}
  >
    {intl.get('hzero.common.button.save').d('保存')}
  </Button>

1. 文字按钮

当想要控制c7n-ui按钮的权限，设置 type 属性为 7n-pro，其余的属性与设置 hzero-ui 权限按钮无异。

  <Button
    type="c7n-pro"
    permissionList={[
      {
        code: `${path}.button.save`,
        type: 'button',
        meaning: '银行定义-保存',
      },
    ]}
    onClick={() => this.handleSave}
  >
    {intl.get('hzero.common.button.save').d('保存')}
  </Button>

FormItem 组件使用与 Button 组件无异；

导入组件时可使用别名： import { Button as PermissionButton, FormItem as PermissionFormItem } from 'components/Permission';；

TablePermission 组件

控制表格列的渲染，权限控制类型默认是：hidden，不可更改。

1. 引入 TablePermission 组件

import { TablePermission } from 'components/Permission'

1. 定义列时，设置列的 code 属性

const columns = [
    {
      permissionList: [
        {
          code: `${path}.table.orderSeq`,
          type: 'table',
          meaning: '银行定义-序号',
        },
      ],
      title: intl.get('hiam.openApp.model.openApp.orderSeq').d('序号'),
      dataIndex: 'orderSeq',
    },
    {
      title: intl.get('hzero.common.button.action').d('操作'),
      width: 150,
      render: (text, record) => {
        return (
          <span className="action-link">
            <PermissionButton
              type="text"
              permissionList={[
                {
                  code: `${path}.button.edit`,
                  type: 'button',
                  meaning: '银行定义-编辑',
                },
              ]}
              onClick={() => this.handleEdit(record)}>
                {intl.get('hzero.common.button.edit').d('编辑')}
            </PermissionButton>
          </span>
        );
      },
    },
  ];

1. 使用 TablePermission 组件

  <TablePermission>
    <Table
      columns={columns}
      ...
    />
  </TablePermission>

对于行内编辑表格（EditTable），也是如上操作。

Fields 组件

用于控制某一块表单区域的权限。

1. 引入 Fields 组件

  import { Fields } from 'components/Permission';

1. 设置 permissionList 属性后，包裹需要控制的表单项

  <Fields
    permissionList={[
      {
        code: `${path}.fields.edit`,
        type: 'fields',
        meaning: '公告管理-编辑',
      },
    ]}
  >
    <Row>
      <Col>
        <FormItemPermission
          permissionList={[
            {
              code: `${path}.fields.edit2`,
              type: 'fields',
              meaning: '公告管理-编辑',
            },
          ]}
          label={intl.get('hzero.common.date.active.from').d('有效日期从')}
          {...formItemLayout}
        >
          {getFieldDecorator('startDate', {
            initialValue: '',
          })(
            <DatePicker
              style={{ width: '100%' }}
              placeholder=""
            />
          )}
        </FormItemPermission>
      </Col>
      <Col>
        <FormItem
          label={intl.get('hzero.common.date.active.to').d('有效日期至')}
          {...formItemLayout}
        >
          {getFieldDecorator('endDate', {
            initialValue: '',
          })(
            <DatePicker
              style={{ width: '100%' }}
              placeholder=""
            />
          )}
        </FormItem>
      </Col>
    </Row>
  </Fields>

在 Fields 中嵌套使用 FormItem 时：

Fields 鉴权失败，FormItem 也将会是鉴权失败。
Fields 鉴权成功，FormItem 的鉴权结果将由其本身的鉴权结果决定，

04.按钮扫描

新的权限按钮扫描工具已经整合到系统开发助手，点击前端扫描工具开始扫描。