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

傷城~ 2023-05-31 06:54 30阅读 0赞

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',
                },
              ],
            }],
          },
        ],
      },
    ]