Ant Design Pro 动态菜单不显示答案

【问题标题】：Ant Design Pro dynamic menu not showing upAnt Design Pro 动态菜单不显示
【发布时间】：2020-09-03 17:29:39
【问题描述】：

按照https://pro.ant.design/docs/router-and-nav#fetch-menu-from-server的说明进行操作

我将文件 BasicLayout.tsx 更改如下。菜单未显示。

...
const testMenu = [{name:"login", path:"/user/login"}] as any;
const [menuData, setMenuData] = useState([]);

useEffect(() => {
  if (dispatch) {
    dispatch({
      type: 'user/fetchCurrent',
    });
  }
  setMenuData(testMenu)
}, []);
...
menuDataRender={()=>menuData}
...

【问题讨论】：

标签： ant-design-pro

【解决方案1】：

我和你一样，但和你一样失败。文件仍然是错误的。而且我发现从服务器获取菜单在 ant design pro v4 中有很多错误。（也许我不知道）所以我的最终决定是按照最初的设计显示 /config/config.ts 中的所有菜单。并仅从服务器获取授权信息并仅设置权限以仅显示登录用户相关菜单。所以我的解决方案（不正确的答案）是：

我引用了这个链接。 https://umijs.org/docs/runtime-config#patchroutes-routes-

创建文件/src/app.tsx并插入代码如下：

interface PathAndIdsModel {
  path: string;
  ids: string[];
}

const setAuthority = (routes: any, pathAndIds: PathAndIdsModel[]) => {
  routes.forEach((route: any) => {
    const found = pathAndIds.find((item) => item.path === route.path);
    if (found) {
      // eslint-disable-next-line no-param-reassign
      route.authority = [...new Set([...(route.authority || []), ...found.ids])];
    }

    if (route.routes) {
      setAuthority(route.routes, pathAndIds);
    }
  });
};

async function patchRoutes({ routes }) {
  const response = await fetch(`https://localhost:44357/authorities`);
  const pathAndIds = await response.json();
  setAuthority(routes, pathAndIds);
}
export { patchRoutes };

在 ASP.Net Core Controller 中插入以下代码：

        [HttpGet("/authorities")]
        public IEnumerable<object> Authorities()
        {
            return new[]
            {
                new {
                    Path = "/dashboard/analysis",
                    Ids = new [] { "user", "admin", },
                },
                new {
                    Path = "/dashboard/monitor",
                    Ids = new [] { "user", "admin", },
                },
                new {
                    Path = "/dashboard/workplace",
                    Ids = new [] { "admin", },
                },
                new {
                    Path = "/form/basic-form",
                    Ids = new [] { "admin", },
                },
            };
        }

/dashboard/workplace 和/form/basic-form 页面如果以用户身份登录将被隐藏，但如果以管理员身份登录则会显示。

我尝试从服务器获取完整路由，但由于异步调用失败，UmiJS 没有等到从服务器获取并设置新路由。因此，当我从服务器获取路由并更改路由时，UmiJS 已经转换了旧路由的图标和组件，而我的新路由从未改变。

【讨论】：