确切来说,这个是 Ant Design Pro 里面的组件,使用方式很简单,更多的,可以考虑将它进行再封装。先来看一下他在文档里的使用方式。
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,
);
说一下基本用法,RenderAuthorized(‘user’) 传入的 ‘user’ 就是当前用户的权限,authority={[‘user’, ‘admin’]} 指的就是 组件允许的就是权限是 user 和 admin, authority 除了传入数组也可以只传入字符串,同样,用户权限除了字符串,数组也可以。
这里再结合 Pro 中再次封装的 Authorized 组件概念,讲一下该如何封装
// Authorized/index.js
import React, { Component } from 'react';
import RenderAuthorized from 'ant-design-pro/lib/Authorized';
import { getAuthority } from './authority';
const AuthorizedPermission = RenderAuthorized(getAuthority());
export default class Authorized extends Component {
render() {
const { children, authority } = this.props;
return (
<AuthorizedPermission authority={authority}>
{children}
</AuthorizedPermission>
);
}
}
// Authorized/authority.js
export function getAuthority() {
if (localStorage.getItem('userPermission')) {
return localStorage.getItem('userPermission') || 'user';
}
}
export function setAuthority(authority) {
return localStorage.setItem('userPermission', authority);
}
// detail.js
<Authorized authority={['amdin', 'user']}>
<Button type="primary">编辑</Button>
</Authorized>
以上就是 Authorized 的简单使用方法。