• 基本使用
• 使用数组作为参数
• 使用方法作为参数
• 注解基本使用

Authorized权限

权限组件，通过比对现有权限与准入权限，决定相关元素的展示。

引用方式：

import Authorized from 'ant-design-pro/lib/Authorized';

详细使用方式请参照：独立使用 pro 组件

代码演示

基本使用

Basic use

import RenderAuthorized from 'ant-design-pro/lib/Authorized';
import { Alert } from 'antd';
const Authorized = RenderAuthorized('user');
const noMatch = <Alert message="No permission." type="error" showIcon />;
ReactDOM.render(
  <div>
    <Authorized authority="admin" noMatch={noMatch}>
      <Alert message="user Passed!" type="success" showIcon />
    </Authorized>
  </div>,
  mountNode,
);

使用数组作为参数

Use Array as a parameter

import RenderAuthorized from 'ant-design-pro/lib/Authorized';
import { Alert } from 'antd';
const Authorized = RenderAuthorized('user');
const noMatch = <Alert message="No permission." type="error" showIcon />;
ReactDOM.render(
  <Authorized authority={['user', 'admin']} noMatch={noMatch}>
    <Alert message="Use Array as a parameter passed!" type="success" showIcon />
  </Authorized>,
  mountNode,
);

使用方法作为参数

Use Function as a parameter

import RenderAuthorized from 'ant-design-pro/lib/Authorized';
import { Alert } from 'antd';
const Authorized = RenderAuthorized('user');
const noMatch = <Alert message="No permission." type="error" showIcon />;
const havePermission = () => {
  return false;
};
ReactDOM.render(
  <Authorized authority={havePermission} noMatch={noMatch}>
    <Alert
      message="Use Function as a parameter passed!"
      type="success"
      showIcon
    />
  </Authorized>,
  mountNode,
);

注解基本使用

secured demo used

import RenderAuthorized from 'ant-design-pro/lib/Authorized';
import { Alert } from 'antd';
const { Secured } = RenderAuthorized('user');
@Secured('admin')
class TestSecuredString extends React.Component {
  render() {
    <Alert message="user Passed!" type="success" showIcon />;
  }
}
ReactDOM.render(
  <div>
    <TestSecuredString />
  </div>,
  mountNode,
);

API

RenderAuthorized

RenderAuthorized: (currentAuthority: string | () => string) => Authorized

权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。

Authorized

最基础的权限控制。

Authorized.AuthorizedRoute

其余参数与 Route 相同。

Authorized.Secured

注解方式，@Authorized.Secured(authority, error)

Authorized.check

函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 Authorized.check(authority, target, Exception)注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。