一、前言
- ant design pro 框架自带菜单及路由的权限配置功能，本教程基于框架内置功能，请使用 ant design pro 框架默认配置；
- ant design pro 权限控制分 菜单的显示隐藏权限（
注解1）和 路由的访问权限（注解2），需要同时设置才能起到完整的权限控制； - 笔者框架依赖包版本参考：
"@ant-design/pro-layout": "^4.8.7",
"@antv/data-set": "^0.10.2",
"@antv/g2-brush": "^0.0.2",
"@types/react-infinite-scroller": "^1.2.1",
"antd": "^3.26.20",
"axios": "^0.19.0",
"bizcharts": "^3.5.5",
"bizcharts-plugin-slider": "^3.0.1",
"classnames": "^2.2.6",
"commitizen": "^3.0.0",
"coordtransform": "^2.1.2",
"dva": "^2.4.1",
"js-logger": "^1.6.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"omit.js": "^1.0.2",
"path-to-regexp": "^3.0.0",
"qs": "^6.7.0",
"react": "^16.8.6",
"react-amap": "^1.2.8",
"react-copy-to-clipboard": "^5.0.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.8.6",
"react-infinite-scroller": "^1.2.4",
"redux": "^4.0.1",
"reqwest": "^2.0.5",
"umi": "^2.11.0",
"umi-plugin-pro-block": "^1.3.4",
"umi-plugin-react": "^1.10.1",
"umi-request": "^1.0.8"
- 权限校验流程原理：
- '/config/router.ts' 文件在需要权限校验的路由添加 authority 属性和 'Routes: ['src/pages/Authorized']' 属性，authority 属性控制 菜单的显示隐藏权限（
即注解1），Routes 属性控制 路由的访问权限（即注解2）；- 用户登录时调用 '/src/utils/authority' 路径文件下的 setAuthority 方法，设置 localStorage 的 'antd-pro-authority' 属性（
设置用户具有的权限）；- '/src/layouts/BasicLayout.tsx' 文件的 menuDataRender 方法渲染菜单，并调用 Authorized.check() 方法校验菜单显示权限,此步仅控制 菜单的显示隐藏权限（
无法控制路由的访问，通过地址栏输入路由路径还是可以访问到路由页面）；- Authorized.check() 方法来自于 '/src/components/Authorized/CheckPermissions.tsx' 文件中的checkPermissions() 方法，该方法会校验路由权限和用户权限是否匹配，匹配则通过并加载菜单，否则隐藏菜单；
- '/src/pages/Authorized.tsx' 文件下的 getRouteAuthority 方法控制路由访问，拥有权限走 authority，没有权限走 noMatch，此步控制 路由的访问权限
二、具体配置步骤
1.修改'/config/router.ts'文件
{
path: '/partner',
name: 'partner',
icon: 'global',
Routes: ['src/pages/Authorized'], //添加这段代码，路由访问时会进行权限校验（不加的话，菜单无权限看到，但是地址栏输入路由路径依然可以访问到）
authority: ['partner'], //具有此角色权限的用户才有菜单访问权限（没有partner角色权限菜单栏不显示，路由也不可访问）
routes: [
{
path: '/partner/index',
name: 'ptIndex',
component: './partner/index',
Routes: ['src/pages/Authorized'],
authority: ['partner']
},
{
path: '/partner/info',
name: 'efInfo',
component: './partner/info',
Routes: ['src/pages/Authorized'],
authority: ['partner']
},
],
},
2.修改'/src/models/login.ts'文件
import { setAuthority } from '/src/utils/authority';
import { reloadAuthorized } from '/src/utils/Authorized';
// ...
// 省略部分代码
// ...
// 在获取用户权限的地方添加以下代码，设置用户的权限角色
setAuthority(null); // 初始化重置用户角色权限
// ...
// 自定义逻辑判断
// ...
setAuthority('vehicle'); // 用户有权限时，调用'/src/utils/authority'路径文件下的 setAuthority 方法，该方法会把值 'vehicle' 添加到 localStorage 的 'antd-pro-authority' 属性中
reloadAuthorized() // 如果每次重新登录时，角色权限不会刷新生效，请调用 '/src/utils/Authorized' 路径文件下的 reloadAuthorized 方法，重新加载路由权限校验
此时，本地缓存 localStorage 中 antd-pro-authority 属性已有 partner 角色权限
