实现按钮与Table权限

[ytxbnahn]

起因

在开发后台管理系统的过程中，需要根据不同角色的权限去查看到一个Table中不同的数据，并且每个角色拥有不同的增删查该等操作。后台控制的同时，需要前端ui界面能够同步控制。

技术准备

React Ant Design TypeScript MobX

开始

权限获取

如果我们需要管理的页面不是很多，我们可以在用户登录时直接返回所有页面的Table字段权限和按钮权限，存入MobX管理。但是当页面足够多时这种方法会导致初始登录时加载的信息过多影响性能。将权限信息根据不同页面分割，利用react-router监听props.location变化加载页面权限是我的选择。

权限定义

permission = { button:['system:add','system:del']， table:['field1','field2','field3'] } system:add 是操作名称，field1 是需要展示的字段

Button部分

const wrapAuth = (WrappedComponent: typeof React.Component) => {
  return class PermissionAuth extends React.PureComponent<IProps> {
    render() {
      var { permissions, button, ...rest } = this.props;
      let cond:Boolean = !!button && permissions.buttons.includes(button);
      if (cond) {
        return <WrappedComponent {...rest} />;
      } else {
        return null;
      }
    }
  };
};
export const AuthButton =  wrapAuth(Button)

 <AuthButton permissions={this.props.auth.permissions} button="system:add">
          添加
 </AuthButton>

利用React高阶组件

Table部分

  const columns = ColumnProps<IColumns>[] = [
      {
        title: "姓名",
        dataIndex: "name"
      },
     {
        title: "电话",
        dataIndex: "phone"
      },
]
  const showColumns = this.props.auth.checkTable<IColumns>(columns);
  @action checkTable<T>(columns: ColumnProps<T>[]): ColumnProps<T>[] {
    return columns.filter((item, index) => {
      if (!item.dataIndex) return false;
      return this.permissions.fields.indexOf(item.dataIndex) !== -1;
    });
  }
  <Table columns={showColumns}/>