Ant Design Pro 使用Authorized组件做权限验证

Ant Design Pro做为阿里旗下的开源前端框架其优秀和优势就不用赘述了。
请看下图

今天我们要讲的是如何在ant design pro中做权限验证。

先上代码：

import RenderAuthorized from '../components/Authorized';const user=getUser();
const Authorized = RenderAuthorized(user.role);
const noMatch = <Alert message="No permission." type="error" showIcon />;const havePermission = () => {return false;
};const havePermissionAsync = new Promise((resolve,reject)=>{// Call reslove on behalf of passedsetTimeout(()=>reslove(),1000)
});ReactDOM.render(<div><Authorized authority="admin" noMatch={noMatch}><Alert message="user Passed!" type="success" showIcon /></Authorized><Authorized authority={['user','admin']} noMatch={noMatch}><Alert message="Use Array as a parameter passed!" type="success" showIcon /></Authorized><Authorized authority={Havepermission} noMatch={noMatch}><Alert message="Use function as a parameter passed!" type="success" showIcon /></Authorized><Authorized authority={havePermissionAsync} noMatch={noMatch}><Alert message="Use Promise as a parameter passed!" type="success" showIcon /></Authorized></div>mountNode,
);

现在我们再回头分析代码。

Authorized组件的authority属性支持：

1、字符串。应用场景为当你只想一个角色有权限使用该组件的时候。
2、数组。应用场景为当你想多个角色有权限使用该组件的时候。
3、函数。当你的业务需要使用函数的时候使用。
4、Promise 。当你需要使用promise的时候使用。

Authorized组件的noMatch属性是支持嵌入其它组件的，这样你可以放提示信息的组件，甚至是跳转到登陆页的Redirect组件像这样：
const noMatch = <Redirect exact from="/" to="/user/login"/>;

Ant Design Pro 使用Authorized组件做权限验证相关推荐

Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）
Ant Design Pro of Vue方案一权限路由配置(一步步完成,包括所有后端数据库代码,萌新向) 参考了许多csdn的文章,感谢大家为社区做的贡献,我也来汇总一波,谢谢
ant design pro实现动态路由以及权限的控制
dynamic-menu-router ant design pro动态路由权限,目前基于ant design pro1.4.4版本,只用于左侧菜单权限的设置和按钮权限设置,关于最新版本权限的更新,敬 ...
Ant Design Pro 项目图表组件点击事件
背景:使用框架配套图表组件charts 要求柱形图可实现点击事件方法:onReady 官网:https://charts.ant.design/zh/docs/api/options/events ...
Ant Design Pro 登录流程以及路由权限设置
登录流程: 1.ant 框架最外层套了 SecurityLayout 布局 SecurityLayout 中判断用户是否登录,做自动跳转路由处理. 里面的 currentUser 和 currentU ...
Ant Design Pro 企业级后台实战（73 个视频）
Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ...
使用Ant Design Pro，一个企业级开箱即用的中后台前端
#目录 ** 此文仅是个人自学理解的学习笔记,若有不对之处敬请指导更正,谢谢! ** 文章目录 @[toc] Ant Design Pro 了解知识储备安装使用方法一:clone 实践 ESli ...
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
Ant Design Pro在使用TreeSelect树选择组件时，报错未注册
Ant Design Pro在使用树选择组件时,报错未注册 did you register the component correctly? 经过检查发现Ant Design Pro是按需引入的,需 ...
ant design pro模板_ant design pro 当中改变ant design 组件的样式和数据管理
ant design pro 简介官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...

Ant Design Pro 使用Authorized组件做权限验证

Ant Design Pro 使用Authorized组件做权限验证相关推荐

最新文章

热门文章