ant design pro v2 动态生成菜单

在一般管理系统，用户权限、角色是可以配置的，
但是 ant design pro 的示例工程里面角色是被定死的，角色对应的菜单也是被定死的，
面对可以配置的需求，就需要有服务端来指定页面菜单的显示；

菜单位于 'src\layouts\BasicLayout.js' 文件内，

具体可以看出

是通过 DVA 获取的，来源位于 'src\models\menu.js' 文件内，

具体可以看出

修改思路，通过修改 model， 改成从服务器获取：

1、修改model
文件：'src\models\menu.js'

export default {
  namespace: 'menu',

  state: {
    menuData: [],
    breadcrumbNameMap: {},
  },

  effects: {
    *getMenuData({ payload }, { call, put }) {
      // 从配置文件获取菜单路由
      // const { routes, authority } = payload;
      // const menuData = filterMenuData(memoizeOneFormatter(routes, authority));

      // 从服务器获取菜单路由
      const routes = yield call(fetchRoutes, {});
      const menuData = filterMenuData(memoizeOneFormatter(routes, null));

      const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);

      yield put({
        type: 'save',
        payload: { menuData, breadcrumbNameMap },
      });
    },
  },

  reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
  },
};

2、修改service
文件：'src\services\api.js'

// 获取菜单路由
// eslint-disable-next-line import/prefer-default-export
export async function fetchRoutes(params) {
  return request(`${urlFixPath}/api/fetch_routes`, {
    method: 'POST',
    body: {
      ...params,
    },
  });
}

3、修改mock
文件：'mock\api.js'

function fetchRoutes(req, res) {
  const result = [
    // main
    {
      path: '/main',
      name: 'main',
      component: './main/main',
    },
    // 用户管理
    {
      path: '/manage_sys_user',
      name: 'manage_sys_user',
      routes: [
        {
          path: '/manage_sys_user/manage_sys_user',
          name: 'manage_sys_user',
          component: './manage_sys_user/manage_sys_user',
        },
        {
          path: '/manage_sys_user/manage_role',
          name: 'manage_role',
          component: './manage_sys_user/manage_role',
        },
      ],
    },
  ];

  return res.json(result);
}

export default {
  // 获取菜单路由
  'POST /api/fetch_routes': fetchRoutes,
};

4、菜单名称
文件：'src\locales\zh-CN\menu.js'
按文档修改

 

转载于:https://www.cnblogs.com/van28/p/11314161.html