• 前端权限控制


    01. 说明

    1.1 前端权限组件

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

    页面控制组件ButtonFormItemFieldsTablePermission

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

    其中 ButtonFormItem 除了新增 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 接口进行鉴权,该接口返回示例如下:

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

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

    权限控制类型设置

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

    权限控制

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

    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 的鉴权结果将由其本身的鉴权结果决定,

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

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