• 前端权限控制

    01. 说明

    1.1 前端权限组件

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

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

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

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

    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 版本中，权限组件的控制逻辑调整为：

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

    02. API

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

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

    03. 使用示例

    Button 组件

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

      import { Button } from 'components/Permission';

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

    当想要控制文字类型按钮的权限，比如 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>

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

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

    TablePermission 组件

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

    import { TablePermission } from 'components/Permission'

    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>
        );
      },
    },
  ];

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

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

    Fields 组件

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

      import { Fields } from 'components/Permission';

      <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 时：

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

    注意一：推荐控制类型使用 禁用 类型。

    注意二：当控制类型为 隐藏 时，需要考虑到表单项被隐藏后的页面布局。