在講解這個功能之前，我們先來看一下antd pro中菜單是怎么加載出來的。

antd pro 左側菜單的初始化數(shù)據(jù)來源于config/config.ts文件里面的routes屬性的值。

側邊欄菜單數(shù)據(jù)來源

因此，只要我們在頁面加載前改掉這里的值就可以，實現(xiàn)動態(tài)加載菜單了。

那么怎樣在頁面加載之前就改掉這里的菜單呢？

因此我們需要引入umijs的一個知識點：運行時配置。

什么是運行時配置呢？

運行時配置是他跑在瀏覽器端，當頁面進入瀏覽器加載的失手，會執(zhí)行我們在運行時配置里面編寫的代碼，基于此，我們可以在這里寫函數(shù)、jsx、import 瀏覽器端依賴等等。我們這里的動態(tài)菜單就是通過這種方式實現(xiàn)。

怎樣來編寫運行時配置的代碼呢？

在官方文檔里面有這樣一句話：約定?src/app.tsx?為運行時配置。所以我們在這個文件里面編寫就行了。

需要注意的是umijs給我們提供了4個方法。分別是：

patchRoutes({?routes?})

修改路由。比如調整?路由。將它和?render?一起使用，可以達到請求服務端根據(jù)響應動態(tài)更新路由的目的。

render(oldRender: Function)：

覆寫 render。比如用于渲染之前做權限校驗。

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

在初始加載和路由切換時做一些事情。比如用于做埋點統(tǒng)計，比如用于設置標題。

rootContainer(LastRootContainer, args)

修改交給 react-dom 渲染時的根組件。比如用于在外面包一個 Provider。

這里我們只需要用到上面兩個方法就行了。也是就是render和patchRoutes配合使用。就可以達到我們的目錄。

動態(tài)菜單的實現(xiàn)。

01創(chuàng)建app.ts文件。

在src目錄下面創(chuàng)建一個app.ts文件。注意只能在該目錄下面創(chuàng)建。

創(chuàng)建完成之后src的目錄結構如下：

接下里的兩個方法都是在這里編寫的。

02編寫兩個方法。

開始編寫的代碼如下。主要是來看看，兩個函數(shù)的執(zhí)行順序。

注意

第7行代碼是必須的，否則，頁面始終是loading狀態(tài)。

項目運行之后，進入瀏覽器控制臺：

打印的信息說明，render函數(shù)是在patchRoutes之前執(zhí)行的。因此我們可以在這里發(fā)起請求，通過接口給我們返回菜單數(shù)據(jù)，然后在render里面進行修改，就可以修改菜單了。

03發(fā)起請求

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

mock的代碼如下：

這里如果傳遞的參數(shù)userName的值是admin，那么是兩個菜單，否則就只有一個菜單。

04render函數(shù)請求接口。

這里我這邊采用fetch函數(shù)，代碼如下：

?現(xiàn)在authRoutes的長度是2.也就是返回的是兩個菜單。

05重構菜單數(shù)據(jù)。

現(xiàn)在authRoutes的數(shù)據(jù)就是接口返回的。由于接口返回的數(shù)據(jù)是不能直接渲染成菜單的，需要程序處理一下。

這里編寫了一個函數(shù)專門用來處理接口返還的菜單數(shù)據(jù)，具體代碼如下：

06拼接菜單

把處理好的菜單數(shù)據(jù)整合到routes里面，這里的代碼就需要寫在patchRoutes里面了。

在這個函數(shù)里面我們用一行代碼就可以了：

來看看最后的效果：

如果userName的值不是admin 那就只有page1這個菜單了。