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

Song • 3587次浏览 • 0个评论 • 2018-09-27 02:28:13

权限控制是中后台系统中常见的需求之一,你可以利用我们提供的权限控制组件,实现一些基本的权限控制功能,脚手架中也包含了几个简单示例以提供参考。权限组件 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就可以了!

参考:

提交评论
要回复文章请先登录注册
用户评论
  • 没有评论
    公告
    中国晚上好,随时随地分享前沿科技,好吃好玩,有趣有料的新鲜事;本站可以分享资源,技术,观点,态度;同时希望大家做一个文明的分享者!
    广告
    pytorch中文网