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() {
return <Alert message="user Passed!" type="success" showIcon />;
}
}
ReactDOM.render(
<div>
<TestSecuredString />
</div>,
mountNode
);
API
RenderAuthorized
RenderAuthorized: (currentAuthority: string | () => string) => Authorized
权限组件默认 export RenderAuthorized 函数,它接收当前权限作为参数,返回一个权限对象,该对象提供以下几种使用方式。
Authorized
最基础的权限控制。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
children | 正常渲染的元素,权限判断通过时展示 | ReactNode | - |
authority | 准入权限/权限判断 | string | array | Promise | (currentAuthority) => boolean | Promise | - |
noMatch | 权限异常渲染元素,权限判断不通过时展示 | ReactNode | - |
Authorized.AuthorizedRoute
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
authority | 准入权限/权限判断 | string | array | Promise | (currentAuthority) => boolean | Promise | - |
redirectPath | 权限异常时重定向的页面路由 | string | - |
其余参数与 Route
相同。
Authorized.Secured
注解方式,@Authorized.Secured(authority, error)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
authority | 准入权限/权限判断 | string | Promise | (currentAuthority) => boolean | Promise | - |
error | 权限异常时渲染元素 | ReactNode |
Authorized.check
函数形式的 Authorized,用于某些不能被 HOC 包裹的组件。 Authorized.check(authority, target, Exception)
注意:传入一个 Promise 时,无论正确还是错误返回的都是一个 ReactClass。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
authority | 准入权限/权限判断 | string | Promise | (currentAuthority) => boolean | Promise | - |
target | 权限判断通过时渲染的元素 | ReactNode | - |
Exception | 权限异常时渲染元素 | ReactNode | - |