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

旧城等待， 2023-06-23 02:55 48阅读 0赞

### 一、菜单权限 ###

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