7nfs客户端没权限_Ant design pro v4-服务器菜单和路由权限控制

要解决的问题：ant design pro默认情况下，菜单和路由都用配置的方式，在前端的config/config.ts中配置。但是大多数后台系统都需要由后端服务器控制权限。

类似的需求一般包括两点：

1、“只看该看的，防君子”：不同角色对应不同菜单，在用户登录时，由服务器根据登录用户的角色生成菜单；有权限的菜单显示，没权限的菜单隐藏。

2、“想看也不行，防小人”：防止用户直接通过在浏览器中输入未授权菜单的path进行访问。

Ant design pro v4版本的官方上，简单说明了从服务器拉取菜单的方法，但是说得很简略，对新手来说还要自己摸索一番。而且这个方案，只能实现上面提到的第1条，只要path被用户知道了，仍然可以强行输入path进行访问。在网上查了半天，才找到解决第2条的方法——动态更新路由。下面就把我的经验分享给大家，不对之处还望指出，不吝赐教。

拉取服务器菜单

1. 实现menuModel，在srcmodels下，添加menu.ts

import { Effect } from 'dva';
import { Reducer } from 'redux';
import { getMenuData } from '@/services/menu';export interface MenuModelState {menuData?: any[];
}export interface MenuModelType {namespace: 'menu';state: MenuModelState;effects: {fetchMenu: Effect;};reducers: {saveMenuData: Reducer<MenuModelState>;};
}const MenuModel: MenuModelType = {namespace: 'menu',state: {menuData: [],},effects: {*fetchMenu(_, { call, put }) {const response = yield call(getMenuData);yield put({type: 'saveMenuData',payload: response.data,});},},reducers: {saveMenuData(state, action) {return {...state,menuData: action.payload || [],};},},
};export default MenuModel;

2. 实现menuService，在srcservices下，添加menu.ts

import request from '@/utils/request';export async function getMenuData(): Promise<any> {return request('/api/account/get_menu',{method: 'POST',});
}

3. 在BasicLayout.tsx中使用connect装饰器进行状态属性绑定

export default connect(({ global, settings, menu }: ConnectState) => ({collapsed: global.collapsed,settings,menuData: menu.menuData,
}))(BasicLayout);

4. 修改BasicLayout.tsx中ProLayout的menuDataRender

const {dispatch,children,settings,location = {pathname: '/',},menuData,
} = props;const serverMenuItem = ():MenuDataItem[]=>{const transMenuItem :MenuDataItem[] = [];if(Array.isArray(menuData)){menuData.forEach((v) => {const localV = { ...v, children: v.children ? menuDataRender(v.children) : [] };const localMenuDataItem = Authorized.check(v.authority, localV, null) as MenuDataItem;transMenuItem.push(localMenuDataItem);});}return transMenuItem;
};menuDataRender={serverMenuItem}

5. 服务器下发的菜单格式

{"code": 0,"message": "response successful","data": [{"path": "/overview","name": "数据总览","children": [{"path": "/overview/daily","name": "analysis12","children": null,"authority": null}],"authority": ["admin", "user"]}, {"path": "/function","name": "gongneng","children": [{"path": "/function/sign","name": "sign111","children": null,"authority": null}, {"path": "/function/task","name": "task111","children": null,"authority": ["admin"]}, {"path": "/function/pay","name": "task111","children": null,"authority": ["admin"]}],"authority": null}]
}

6. 菜单权限说明

登录后，根据用户的角色返回对应的菜单树，服务器下发的菜单才会显示。

动态更新路由

1. 添加umi运行时配置，在src下添加app.tsx

import pathRegexp from "path-to-regexp";
import { Route } from '@/models/connect';let extraRoutes:Route[];const updateRouteAuthority = (path: string, routeData: Route[], sAuth: string[] | string | undefined) => {if(routeData && Array.isArray(routeData)){routeData.forEach(route => {if(route.path){if((route.path === '/') || (pathRegexp(`${route.path}/(.*)`).test(`${path}/`))){if (route.path === path && sAuth) {route.authority = sAuth;}if (route.routes) {updateRouteAuthority(path, route.routes, sAuth);}}}});}
};const patchEachRoute = (serverRoute: Route[], routes:Route[])=>{if(serverRoute && Array.isArray(serverRoute)){serverRoute.forEach(eRoute => {updateRouteAuthority(`${eRoute.path}`, routes, eRoute.authority);if(eRoute.children){patchEachRoute(eRoute.children, routes)}});}
};export function patchRoutes(routes:Route[]) {if(extraRoutes){patchEachRoute(extraRoutes, routes);}
}export function render(oldRender) {fetch('/api/account/get_route',{method:'POST'}).then(res=>res.json()).then(res => {if(res.code === 0){extraRoutes = res.data;}oldRender();})
}

2. 服务器下发路由格式与菜单格式相同

登录前先拉取路由信息，在patchRoutes中根据服务器下发的路由权限，刷新本地srcpages.umirouter.js中route的authority信息。这样，即使用户强制输入path进行访问也会被拒。