要解決的問題：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進行訪問也會被拒。

總結

以上是生活随笔為你收集整理的7nfs客户端没权限_Ant design pro v4-服务器菜单和路由权限控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。