Ant Design Pro权限(Authorized)管理模块深入解读

权限控制是中后台系统中常见的需求之一，你可以利用我们提供的权限控制组件，实现一些基本的权限控制功能，脚手架中也包含了几个简单示例以提供参考。权限组件 Authorized 这是脚手架权限管理的基础，基本思路是通过比对当前权限与准入权限，决定展示正常渲染内容还是异常内容。

一、如何设置用户权限

设置用户权限非常简单，你可以在登录用户model中设置一下此用户的权限级别，如下方法在src/models/login.js：

import { setAuthority } from '../utils/authority';

# 设置权限
if (判断普通权限){
    setAuthority("user");
} else {
    setAuthority("admin");
}

这样我们就已经设置了用户权限了，非常简单！

二、控制菜单显示

如需对某些菜单进行权限控制，只须对菜单配置文件menu.js中的菜单项设置authority属性即可，代表该项菜单的准入权限，菜单生成文件中会默认调用Authorized.check进行判断处理。

{
  name: '表单页',
  icon: 'form',
  path: 'form',
  children: [{
    name: '基础表单',
    path: 'basic',
  }, {
    name: '管理才能查看的menu',
    authority: 'admin',
    path: 'auth',
  }],
}

如上代码authority: 'admin',可以控制admin才能查看到这个路由。

三、控制路由权限

和上面一样，我们只需要设置authority: 'admin',即可限制路由的访问！

'/basic': {
  component: dynamicWrapper(app, ['chart'], () => import('../routes/Basic/Basic')),
},
'/auth': {
  component: dynamicWrapper(app, ['chart'], () => import('../routes/Basic/auth')),
  authority: 'admin', // 配置准入权限
},

四、控制页面元素显示权限

有时候我们在页面中需要控制一些元素只有高级权限才能访问，比如添加用户，这时候上面的方法都不可以用了，所以使用如下方法：

如果你是2.0以上用户，可以使用如下方法导入：

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

如果1.0用户，使用如下方法

import RenderAuthorized from '../../components/Authorized';

具体使用方法如下：

1、设置authority只允许指定权限访问

可以设置authority="admin"来指定用户访问,也可以用<Authorized authority={['user', 'admin']} noMatch={noMatch}>设置多个权限访问

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,
);

2、自定义权限访问

当然上面那种方法不是很灵活，如果你需要根据自己的权限来操作的话，可以使用如下方法：

const havePermission = () => {
  return false;
};

ReactDOM.render(
  <Authorized authority={havePermission} noMatch={noMatch}>
    <Alert
      message="Use Function as a parameter passed!"
      type="success"
      showIcon
    />
  </Authorized>,
  mountNode,
);

你可以在havePermission中设置具体身份现身，如果为true就显示，同时noMatch表示没有权限时显示;如果你不限显示，那就删除掉noMatch就可以了！

参考：

• Authorized 文档
• 权限管理