ant design pro菜单及页面权限逻辑

一、菜单权限

1、config/config.js

属性src/layouts/BasicLayout.jsx ，调用组件。

2、src/layouts/BasicLayout.js

（1）组件<ProLayout />，属性menuDataRender 是对菜单进行权限验证显示
（2）menuDataRender(menuList)方法调用src/utils/Authorized.js的check(item.authority, localItem, null)

return Authorized.check(item.authority, localItem, null);

3、src/utils/Authorized.js

（1）调用来自src/components/Authorized/index.js的check方法

3、src/components/Authorized/index.js

（1）调用src/components/Authorized/CheckPermissions的check()方法

Authorized.check = check;

4、src/components/Authorized/AuthorizedCheckPermissions

（1）如果当前用户角色在菜单权限中，则显示菜单target，如果不在页面权限中，则返回菜单null，即不显示该菜单。

return checkPermissions(authority, CURRENT, target, Exception);

---

二、页面权限

1、config/config.js

属性Routes: ['src/pages/Authorized'] ，表示需要对页面进行权限认证。

2、src/page/Authorized.js

（1）调用getRouteAuthority()方法，得到当前路由可以访问的权限[‘staff’]。

path: '/',
component: '../layouts/BasicLayout',
Routes: ['src/pages/Authorized'],
authority: ['manager', 'staff'],
routes:[
{
	path: '/retail/shop',
	name: '数据管理',
	authority: ['staff'],
	component: './retail/shop',
	},
],

（2）调用来自src/utils/Authorized.js中的组件<Authorized /> ，传入
①authority: 当前页面准入角色,
②noMatch: 如果当前用户不在页面准入角色中，显示的页面，eg:/exception/403, 或/user/login,
③children: children， // 页面路由

<Authorized
	authority={getRouteAuthority(location.pathname, routes) || ''}
    noMatch={isLogin ? <Redirect to="/exception/403" /> : <Redirect to="/user/login" />}
      >
    {children}
</Authorized>

3、src/utils/Authorized.js

（1）调用来自src/utils/authority.js的getAuthority()方法，得到当前用户权限[‘manage’]
（2）调用src/components/Authorized/index.js的RenderAuthorize(getAuthority());
let Authorized = RenderAuthorize(getAuthority());

4、src/components/Authorized/index.js

（1）调用src/components/renderAuthorize.js的renderAuthorize(Authorized)，同步执行src/components/Authorized/renderAuthorize.js中的renderAuthorize，和src/components/Authorized/Authoried.js中的Authorized

5、src/components/Authorized/renderAuthorize.js

（1）将当前用户角色转换成可比较的数据类型
eg：如果是函数，则执行函数；如果是对象，则转换成对象字符串等。

6、src/components/Authorized/Authoried.js

（1）调用src/components/Authorized/AuthorizedCheckPermissions的check()方法，得到dom

const dom = check(authority, childrenRender, noMatch);
return <>{dom}</>;

7、src/components/Authorized/AuthorizedCheckPermissions

（1）如果当前用户角色在页面权限中，则显示页面target，如果不在页面权限中，则显示页面Exception（403或者跳转到登录页）

return checkPermissions(authority, CURRENT, target, Exception);