文章图片标题

Ant Design Pro权限管理组件的使用

分类:网络前端 作者:阳光倾城 评论:0 点击: 41 次 日期:2019-01-28

权限组件Authorized

是antd pro脚手架权限管理的基础,基本思路是对比当前权限与准入权限,决定展示请求的内容还是异常内容。

权限控制场景

控制菜单和路由显示

控制页面元素显示

登录时权限检查

首先看一下菜单和路由的权限控制,是通过配置路由设置准入权限的:

{
  path: '/',
  component: '../layouts/BasicLayout',
  Routes: ['src/pages/Authorized'],
  authority: ['admin', 'user'],
  routes: [
    // forms
    {
      path: '/form',
      icon: 'form',
      name: 'form',
      routes: [
        {
          path: '/form/basic-form',
          name: 'basicform',
          component: './Forms/BasicForm',
        },
        {
          path: '/form/advanced-form',
          name: 'advancedform',
          authority: ['admin'],//配置准入权限,可以配置多个角色
          component: './Forms/AdvancedForm',
        },
      ],
    },
  ],
}

这里需要注意的是Routes属性,由于使用了umi框架,umi 的权限路由是通过配置路由的 Routes 属性来实现。约定式的通过 yaml 注释添加,配置式的直接配上即可。

那么,Routes设置的组件即为权限组件,可以定义被设置组件的渲染结果,上面src/pages/Authorized设置了权限组件,当通过根路径访问系统时触发权限组件,权限组件内部调用了用户身份的获取方法和相关组件的准入权限,触发时自动比较权限,通过则放行,否则跳转预定义的页面(一般是登录页)。

这就是说,路由的控制既可以控制到菜单路由的展示,也可以控制登录权限。

对页面内部元素的权限控制,就是控制某一元素是否显示(不考虑读写权限之类)。

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

也可以使用数组:

<Authorized authority={['user', 'admin']} noMatch={noMatch}>
    <Alert message="Use Array as a parameter passed!" type="success" showIcon />
</Authorized>,

也可以使用方法作为参数:

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

 

使用注解的方式:

import RenderAuthorized from 'ant-design-pro/lib/Authorized';
import { Alert } from 'antd';

const { Secured } = RenderAuthorized('user');

@Secured('admin')
class TestSecuredString extends React.Component {
  render() {
    <Alert message="user Passed!" type="success" showIcon />;
  }
}
ReactDOM.render(
  <div>
    <TestSecuredString />
  </div>,
  mountNode,
);




声明: 除非注明,本文属( 阳光倾城 )原创,转载请保留链接: http://www.tomrrow.com/archives-9697.html