Antd pro 动态路由

在讲解这个功能之前，我们先来看一下antd pro中菜单是怎么加载出来的。

antd pro 左侧菜单的初始化数据来源于config/config.ts文件里面的routes属性的值。

侧边栏菜单数据来源

因此，只要我们在页面加载前改掉这里的值就可以，实现动态加载菜单了。

那么怎样在页面加载之前就改掉这里的菜单呢？

因此我们需要引入umijs的一个知识点：运行时配置。

什么是运行时配置呢？

运行时配置是他跑在浏览器端，当页面进入浏览器加载的失手，会执行我们在运行时配置里面编写的代码，基于此，我们可以在这里写函数、jsx、import 浏览器端依赖等等。我们这里的动态菜单就是通过这种方式实现。

怎样来编写运行时配置的代码呢？

在官方文档里面有这样一句话：约定 src/app.tsx 为运行时配置。所以我们在这个文件里面编写就行了。

需要注意的是umijs给我们提供了4个方法。分别是：

patchRoutes({ routes })

修改路由。比如调整 路由。将它和 render 一起使用，可以达到请求服务端根据响应动态更新路由的目的。

render(oldRender: Function)：

覆写 render。比如用于渲染之前做权限校验。

onRouteChange({ routes, matchedRoutes, location, action })：

在初始加载和路由切换时做一些事情。比如用于做埋点统计，比如用于设置标题。

rootContainer(LastRootContainer, args)

修改交给 react-dom 渲染时的根组件。比如用于在外面包一个 Provider。

这里我们只需要用到上面两个方法就行了。也是就是render和patchRoutes配合使用。就可以达到我们的目录。

动态菜单的实现。

01创建app.ts文件。

在src目录下面创建一个app.ts文件。注意只能在该目录下面创建。

创建完成之后src的目录结构如下：

接下里的两个方法都是在这里编写的。

02编写两个方法。

开始编写的代码如下。主要是来看看，两个函数的执行顺序。

注意

第7行代码是必须的，否则，页面始终是loading状态。

项目运行之后，进入浏览器控制台：

打印的信息说明，render函数是在patchRoutes之前执行的。因此我们可以在这里发起请求，通过接口给我们返回菜单数据，然后在render里面进行修改，就可以修改菜单了。

03发起请求

这里，采用mockjs。接口地址是：/api/menus.

mock的代码如下：

这里如果传递的参数userName的值是admin，那么是两个菜单，否则就只有一个菜单。

04render函数请求接口。

这里我这边采用fetch函数，代码如下：

 现在authRoutes的长度是2.也就是返回的是两个菜单。

05重构菜单数据。

现在authRoutes的数据就是接口返回的。由于接口返回的数据是不能直接渲染成菜单的，需要程序处理一下。

这里编写了一个函数专门用来处理接口返还的菜单数据，具体代码如下：

06拼接菜单

把处理好的菜单数据整合到routes里面，这里的代码就需要写在patchRoutes里面了。

在这个函数里面我们用一行代码就可以了：

来看看最后的效果：

如果userName的值不是admin 那就只有page1这个菜单了。