ant desin pro v4 从服务器获取菜单，js版，非typeScript

2019年10月23日：
网上一直找不到ant design pro v4版本从服务器获取菜单的完整代码，官网文档也太粗略，于是写了这篇文章。

一、BasicLayout.js
1、标签ProLayout增加属性

const { dispatch, children, settings, menuData } = props;
......
// menuDataRender={menuDataRender} // 前端写menu
menuDataRender={() => menuData} // 后台传menu

2、connect增加menuData

export default connect(({ global, settings, menu }) => ({
  collapsed: global.collapsed,
  settings,
  menuData: menu.menuData,
}))(BasicLayout);

3、useEffect增加menu/fetchMenuData

 useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
      dispatch({
        type: 'settings/getSetting',
      });
      dispatch({
        type: 'menu/fetchMenuData',
      });
    }
  }, []);

二、models/mock.js

// import { routerRedux } from 'dva/router';
// import { stringify } from 'querystring';
import { fakeAccountLogin, getFakeCaptcha } from '@/services/login';
import { setAuthority } from '@/utils/authority';
import { reloadAuthorized } from '@/utils/Authorized';
import { getPageQuery } from '@/utils/utils';
import { getMenuData } from '@/services/menu';

const Model = {
  namespace: 'menu',
  state: {
    menuData: [],
  },
  effects: {
    *fetchMenuData({ payload, callback }, { call, put }) {
      const response = yield call(getMenuData);
      yield put({
        type: 'saveReducer',
        payload: response.menuData,
      });
    },
  },

  reducers: {
    saveReducer(state, { payload }) {
      return {
        ...state,
        menuData: payload || [],
      };
    },
  },
};
export default Model;

三、services/menu.js

import request from '@/utils/request';

export async function getMenuData() {
  return request(`/api/example/menu`);
}

四、mock/menu.js

export default {
  '/api/example/menu':{
    menuData: [
      {
        path: '/welcome',
        name: '欢迎',
        hideInMenu: true,
        icon: 'dashboard',
        component: './Welcome',
      },
      {
        path: '/tb',
        icon: 'form',
        name: '后台-商品SKU信息管理',
        component: './tb',
      },
      {
        path: '/jd',
        icon: 'table',
        name: '后台-京东店铺营销数据管理',
        component: './tb',
      },
      {
        path: '/analysis',
        name: '店铺经营统计分析报表',
        icon: 'profile',
        component: './analysis',
      },
      {
        path: '/',
        redirect: '/welcome',
        authority: ['admin', 'user'],
      },
      {
        component: '404',
      },
    ],
  }
}

五、需要注意，后台传过来的menu的路由在router.config.js得有这些

module.exports = [
  {
    path: '/',
    component: '../layouts/BlankLayout',
    routes: [
      {
        path: '/user',
        component: '../layouts/UserLayout',
        routes: [
          {
            path: '/user',
            redirect: '/user/login',
          },
          {
            name: 'login',
            path: '/user/login',
            component: './user/login',
          },
          {
            component: '404',
          },
        ],
      },
      {
        path: '/',
        component: '../layouts/SecurityLayout',
        routes: [{
          path: '/',
          component: '../layouts/BasicLayout',
          routes: [
            {
              path: '/welcome',
              name: '欢迎',
              hideInMenu: true,
              icon: 'dashboard',
              component: './Welcome',
            },
            {
              path: '/tb',
              icon: 'form',
              name: '商品SKU信息管理',
              component: './tb',
            },
            {
              path: '/jd',
              icon: 'table',
              name: '京东店铺营销数据管理',
              component: './tb',
            },
            {
              path: '/analysis',
              name: '店铺经营统计分析报表',
              icon: 'profile',
              component: './analysis',
            },
            {
              path: '/',
              redirect: '/welcome',
              authority: ['admin', 'user'],
            },
            {
              component: '404',
            },
          ],
        }],
      },
    ],
  },
]