Ant Design - Authorized

确切来说，这个是 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 的简单使用方法。