一般情况下登录系统后菜单是由后端返回的,不是前端写死的。antd-pro也支持,修改的路径在app.tsx
在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了,说明配置生效了,接下来就可以围绕这个配置做文章了,我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理,判断菜单里要展示哪些内容(比如替换字段,隐藏不显示的菜单,隐藏按钮等),处理好了后返回一个数组结构即可。
示例代码如下
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
return {
...
menuDataRender: () => menuDataRender(),
...
};
};
const menuDataRender: any = () => {
// 如果没有用户信息就展示空菜单
const loginInfo = sessionStorage.getItem('loginInfo');
if (!loginInfo) {
return [];
}
const currentUser = JSON.parse(loginInfo || '{}');
const { permissions } = currentUser.roleList[0];
// 字段转换为要求字段
let str = JSON.stringify(permissions);
str = str.replace(/"permissionName":/g, '"name":');
str = str.replace(/"permissionCode":/g, '"path":');
str = str.replace(/"childPermissionList":/g, '"routes":');
str = str.replace(/"isShow":false/g, '"hideInMenu":true');//不显示的菜单设置过滤
const data = JSON.parse(str);
data.forEach((item: any) => {
spliceBtn(item);
});
return data;
};
// 判断是页面还是按钮
const spliceBtn = (obj: any) => {
const item = obj;
// 先获取所有的权限
if (item.routes instanceof Array && item.routes.length > 0) {
item.routes.forEach((item2: any) => {
spliceBtn(item2);
});
//这里是判断该节点是页面还是按钮 需要根据项目的具体的情况来判断(比如后端直接给你指定了是按钮还是页面)
const result = item.routes.every((item2: any) => {
return Array.prototype.isPrototypeOf(item2.routes) && item2.routes.length === 0;
});
item.path = `/${item.path}`;
if (result) {
item.hideChildrenInMenu = true; //如果下层全是按钮就不隐藏子元素
}
}
};