在一般管理系统,用户权限、角色是可以配置的,
但是 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'
按文档修改