AntdPro+react 动态路由

AntdPro+react 动态路由需求:根据不同权限显示不同的菜单每个角色的菜单,是可前端页面进行配置的(可变的)思路:将所有路由的name给到后台后台根据token返回对应的name数组前端拿到数组后,遍历现有的route,留下符合条件的路由Code:拿到token后,请求对应路由,将拿到的路由,不管是几层内部结构,解构成平铺一层的数组比如:[ a:[ b:**, c:** ]]把name拿出来全部解构成一层:[a,b,c]遍历筛选:返回新的路由后存在model里model

需求:

  1. 根据不同权限显示不同的菜单
  2. 每个角色的菜单,是可前端页面进行配置的(可变的)

思路:

  1. 将所有路由的name给到后台
  2. 后台根据token返回对应的name数组
  3. 前端拿到数组后,遍历现有的route,留下符合条件的路由

Code:

拿到token后,请求对应路由,
将拿到的路由,不管是几层内部结构,解构成平铺一层的数组
比如:

[
	a:[
		b:**,
		c:**
	]
]

name拿出来全部解构成一层:

[a,b,c]

在这里插入图片描述
遍历筛选:
在这里插入图片描述
返回新的路由后 存在model
在这里插入图片描述
model:
在这里插入图片描述

BasicLayout里替换掉原有用的route

在这里插入图片描述
将文件中的routemenu中的menuData替换掉,文件其他引用的地方记得同步替换

————————

应该就可以了
有问题可留言

今天的文章AntdPro+react 动态路由分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9378.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注