前言
权限是后台管理系统常见的需求,后台开发必须考虑设计的模块,antd-pro给我们提供了很好的关于权限的封装,我们只需要在配置菜单的时候配置上准入身份,在登录成功以后获取到登陆者身份以后更新登录人身份参数即可。
效果:
1、没有准入权限的菜单将不显示
2、直接在浏览器输入没有准入权限的的地址,将跳转到403页面(图1)
图1.直接输入地址但却没有权限
个人demo关于权限简介
1、用邮箱自己注册账户(注册后可以登录但是没有任何权限)guest
2、联系管理员分配权限(分配后可以查看有权限的页面)
3、每次登录后获取最新的权限身份(如:admin,user,guest)
实战
Authorized组件是antd-pro的权限组件
Authorized 官方api
在src/router.js中会发现如下代码
path="/"
render={props => }
authority={['admin', 'user', 'guest']}
redirectPath="/user/login"
/>
其中authority对象就是准入身份的数组,表示只有这些身份的人可以登录,我们在配置的时候一定不要忘记在这更新我们新增的身份
然后就是menu.js,如下,展示了我们在配置菜单的时候怎么配身份
const menuData