antd：动态获取菜单

修改 app.tsx 文件

• 修改 getInitialState 方法

export async function getInitialState(): Promise<{
  ...
  menuData?: MenuDataItem[] | undefined;
  fetchMenuList?: Promise<MenuDataItem[] | undefined>;
}> {
  ...

  const fetchMenuList = async () => {
    const menuList = await fetchMenus();
    return menuList;
  };

  const menuData = await fetchMenuList();	
  return {
    ...
    menuData,
  };
}

• 修改 layout

export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  ...
  return {
	...
	menuDataRender: () => {
      return initialState?.menuData;
    },
  }
}

menuData 结构

[
  {
    path: '/item',
    name: '一级菜单',
    children: [
	  {
	    path: '/item/detail',
	    name: '二级菜单'，
	  }
	],
  }
]

menuData 中只需要 path 和 name，对应的 components 需要在 routes 中配置。

路由文件 routes.ts

export default [
  {
	path: '/item',
	routes: [
	  {
	    path: '/item/detail',
	    component: './detail',
	  }
	]
  },
]

如果在 routes 中配置的菜单在 menuData 中没有，可以修改 app.tsx 文件的 onPageChange 方法，重定向到 404。

onPageChange: () => {
  const { location } = umi.history;
  if (initialState?.menuData?.length) {
    // 如果访问页面不在menuData中，重定向到404
    const isInMenu = checkPathExists();
    if (!isInMenu) history.push("/404");
  }
},