前端升级到AntD Pro V4后，官方文档上说支持了动态Menu的能力，并且还给出了实现方案。本以为可以按照官方文档开启一下这个动态Menu的功能。不曾想，不试不知道，一试吓一跳，完全走不通么。
还是需要投入到万能的谷歌的怀抱，经过好一阵子谷歌，好一阵子验证，最终搞定。这篇文章就来给大家介绍一下AntD Pro V4支持动态Menu的完整实现。
完整实现：
这个实现参考了网上多位大侠的方案，最终融合而成。大致分为如下六步。
第一步，添加model
在src/models/中添加menu.ts文件，文件内容：
import { getMenuData } from '@/services/menu'; // 通过后台返回特定的数组json或者mock模拟数据
import { Reducer } from 'redux';
import { Effect } from './connect';
export interface MenuModelState {
menuData: any[];
}
export interface MenuModelType {
namespace: 'menu';
state: MenuModelState;
effects: {
getMenuData: Effect;
};
reducers: {
save: Reducer
};
}
const MenuModel: MenuModelType = {
namespace: 'menu',
state: {
menuData: [],
},
effects: {
*getMenuData({ payload, callback }, { call, put }) {
const response = yield call(getMenuData);
yield put({
type: 'save',
payload: response,
});
if (callback) callback(response);
},
},
reducers: {
save(state, action) {
return {
...state,
menuData: action.payload || [],
};
},
},
};
export default MenuModel;
第二步，添加service
在src/services/中添加menu.ts文件，文件内容：
import request from 'umi-request';
const BASE_URL = '/v1';
export async function getMenuData(params:any) {
console.log('===========in getMenuData');
console.log(params);
return request(BASE_URL + '/menu/getMenuData', {
method: 'GET',
params: params,
});
}
第三步，修改connect.d.ts的ConnectState来添加menu
修改文件src/models/connect.d.ts：
第四步，修改BasicLayout.tsx文件来关联menu
修改文件src/layouts/BasicLayout.tsx：
第五步，添加mock文件
在src/mock/中添加menu.ts文件，文件内容：
export default {
'Get /v1/menu/getMenuData': [
{
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
children: [
{
path: '/dashboard/analysis',
name: 'analysis',
exact: true,
},
{
path: '/dashboard/monitor',
name: 'monitor',
exact: true,
},
{
path: '/dashboard/workplace',
name: 'workplace',
exact: true,
},
],
}
],
};
第六步，支持国际化
为了menu支持国际化，只需要在menu数据中添加locale属性。
修改src/mock/menu.ts：
export default {
'Get /v1/menu/getMenuData': [
{
path: '/dashboard',
name: 'dashboard',
locale: 'menu.dashboard',//国际化
icon: 'dashboard',
children: [
{
path: '/dashboard/analysis',
name: 'analysis',
exact: true,
},
{
path: '/dashboard/monitor',
name: 'monitor',
exact: true,
},
{
path: '/dashboard/workplace',
name: 'workplace',
exact: true,
},
],
}
],
};
同时在src/locales/xxx/menu.ts中添加相应的国际化配置。比如：
src/locales/zh-CN/menu.ts中配置menu.dashboard：
export default {
...
'menu.dashboard': '桌面'
}
到此为止，你的前端已经支持了动态Menu了，并且实现了通过mock的方式来调试了。后面，你需要在服务端实现接口Get /v1/menu/getMenuData就可以了。
总结：
经过这六个步骤，你现在已经开启了AntD Pro V4的动态Menu时代。