antd-pro(V5)动态菜单_antdpro的菜单-程序员宅基地

技术标签: ant-design-pro  react  

一般情况下登录系统后菜单是由后端返回的,不是前端写死的。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; //如果下层全是按钮就不隐藏子元素
    }
  }
};

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_27175079/article/details/111997298

智能推荐

网鼎杯第四场 shenyue2 writeup_ctf shenyue2-程序员宅基地

文章浏览阅读987次。1. shenyue2题目分析这是一道RSA相关的密码学题目,给出了RSA相关的公钥(n,e)(n,e)(n,e),并且给出了额外的两个参数:一个已知素数rrr以及kkk,并且有如下关系: k=(p−r)dk=(p−r)dk=(p-r)d 其实这是一道2018 CodeGate CTF 的原题,直接按照CTF-WIKI中介绍的解法就可以求出来。而我写这篇文章的目的是向大家介绍另外一种方法,..._ctf shenyue2

将11.x.x升级至16.x.x不成功的一系列问题(二)node-sass sass-loader需安装指定版本_node-sass 升级-程序员宅基地

文章浏览阅读1k次,点赞20次,收藏20次。先根据node版本先锁定node-sass版本 然后再来回切换sass-loader版本 这玩应你就试吧 一试一个一个不吱声_node-sass 升级

python openpyxl ValueError: Value does not match pattern ^[$]?([A-Za-z]{1,3})[$]?(\d+)(:[$]?-程序员宅基地

文章浏览阅读6.7k次。这种问题是因为sheet名称有问题,一般是名字两边有空格?解决:新建一个sheet,然后查看代码,输进去这些,一运行就出来了Sub listSheetName()i = 1For Each sSheet In Application.SheetsCells(i, 1).Value = sSheet.Namei = i + 1NextsSheetEndSub获取到所有..._valueerror: value does not match pattern ^[$]?([a-za-z]{1,3})[$]?(\d+)(:[$]?

Linux 下 对‘pthread_create’未定义的引用_linux 中pthread_create()未定义-程序员宅基地

文章浏览阅读1k次,点赞2次,收藏2次。pthread库不是Linux系统默认的库,连接时需要使用库libpthread.a,在编译中要加-lpthreadgcc xxx.c.pp -lpthread 针对直接编译的target_link_libraries(thread libpthread.so) 针对cmake的这里thread是我的二进制文件..._linux 中pthread_create()未定义

案例 | 蓝天智通:智办事助力“智慧校园”数智化管理,提升人效_蓝天数智(北京)科技有限公司-程序员宅基地

文章浏览阅读298次。01.客户介绍北京蓝天智通科技有限公司以物联网、虚拟化技术为基础,开发数智校园一体化管理系统,助力中国教学管理,实现数字化、可视化、智能化,打造数字孪生智慧校园,赋能教育行业,提高教育信息化和现代化,满足现代教育的需求。本次智慧校园项目,学校要求蓝天智通尽快交付使用,如此庞大复杂的系统对其开发团队提出了更严苛的要求:需求明确、快速开发、快速迭代、敏捷管理。作为蓝天智通数智化校园管理系统负责人大圣(花名),有二十多年互联网行业工作经验,并拥有阿里十几年的项目管理经验。一般的项目对他来说信手捏来_蓝天数智(北京)科技有限公司

Access是什么?-程序员宅基地

文章浏览阅读790次。一种使用简单的数据库软件,非常实用!是微软的一个小型数据库,是Microsoft office 中的一个组件.Access数据库能够进行数据表设计、可视查询设计、SQL查询语言、窗体设计、报表设计、Web页设计、宏设计和VBA程序设计,Access数据库作为面向对象的关系型数据库有着各种完善的功能创建access数据库首先打开我们的access程序,打开方法是单击开始..._access数据库是什么中的一个组件

随便推点

python计算机毕设【附源码】医用仓库管理系统(django+mysql+论文)-程序员宅基地

文章浏览阅读518次,点赞6次,收藏10次。在数据库管理工具的选择上,使用了Navicat 11,这是一个用户友好且功能强大的数据库管理软件,它支持多种数据库系统,包括MySQL,并提供了图形化界面,使得数据库的管理和维护工作更加便捷。开发环境方面,我们选择了PyCharm作为主要的集成开发环境(IDE),它提供了丰富的Python开发工具和插件,支持Django框架,有助于提高开发效率和代码质量。此外,系统还可以记录操作人员的操作记录,便于追踪和审计。提高物资利用率:通过对医用物资的有效管理,可以避免物资的浪费和积压,提高物资利用率。

WIN10 LTSC 2019 安装新版Mircosoft Edge浏览器,解决无法安装问题_ltsc安装不了edge-程序员宅基地

文章浏览阅读1.8w次,点赞3次,收藏7次。WIN10 LSTC 2019 安装新版Mircosoft Edge浏览器,解决无法安装问题自己的笔记本一直使用WIN10 2019 LSTC(MSDN下载的)这一版本,因为这一版本真的太轻快简洁了,最近换电脑也是安装的Win10 LSTC 2019,但是安装完毕后在安装新版edge浏览器的时候提示系统版本低安装不了,自己的旧电脑就是LSTC却安装上,不知道什么原因,后来回想了一下旧电脑的使用过程并对新旧电脑的系统做了详细对比,发现是旧电脑上的系统补丁包版本高,而新电脑是刚安装的系统,补丁包还没有过升级_ltsc安装不了edge

Pluto SDR环境搭建libiio/libad9361-iio/GNU Radio/gr-iio(Ubuntu)_gnuradio 3.8.2 如何支持adalm pluto-sdr windows-程序员宅基地

文章浏览阅读784次,点赞11次,收藏10次。ADI前些年推出的ADALM-PLUTO SDR设备由于其轻便灵活的特点,外加价格相比于专业无线电相当实惠,受到了很多开源社区的欢迎,也诞生了许多的应用,如跟踪GPS、伪造GPS实现硬件级虚拟定位、电子钥匙重发攻击等(这些实际上HackRF做的更多)。同时对于学习通信的师生和对无线电感兴趣的业余玩家,也是个很不错的选择。国内购买纯原版Pluto SDR有些困难,但好在国内也有很多企业或团队基于某些成熟的SDR平台衍生出的性能更强,适用固件更多的软件无线电平台,价格也并非难以承受。_gnuradio 3.8.2 如何支持adalm pluto-sdr windows

SIM卡、USIM卡、UICC卡、eSIM卡的区别_uhimpc-程序员宅基地

文章浏览阅读2.8k次。SIM的英文全称是“Subscriber Identity Module”,即“用户身份模块”。它的主要作用是在移动终端设备与网络通讯时提供身份识别信息及存储数据,大家比较容易理解的就是我们的电话号码(身份识别信息)是与SIM卡直接绑定的,还有SIM卡还可以存储电话号码、短消息等数据。COMPRION公司的测试用SIM卡现在的3G与4G移动系统里,准确地说SIM是一个应用的概念,..._uhimpc

{技术操作} Vue tab 切换 点击栏目背景色改变,内容也改变_vue3el-tabs选中时tabs页背景色改变-程序员宅基地

文章浏览阅读289次,点赞4次,收藏3次。/这是每个tab内容不同的情况下使用,(如果每个tab内部内容一样 底下可直接v-for循环就行了 )工业 内部内容制造 内部内容服务 内部内容其他 内部内容css// 选中后的效果js。_vue3el-tabs选中时tabs页背景色改变

VUE实现一个好看半透明登陆界面(附源码)_vue登录界面主题样式-程序员宅基地

文章浏览阅读5.5k次,点赞4次,收藏22次。欢迎使用消防员定位系统 @西南交通大学 | 邓平老师团队</el-header><el-main> <div id="login_box"> <h2>消防员系统登录</h2> <div id="form"> <div id="input_box"> <i class="fa fa-user" aria-hidden="tr..._vue登录界面主题样式

推荐文章

热门文章

相关标签