AntdPro+react 动态路由

需求:

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

思路:

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

Code:

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

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

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

[a,b,c]

AntdPro+react 动态路由_第1张图片
遍历筛选:
AntdPro+react 动态路由_第2张图片
返回新的路由后 存在model
AntdPro+react 动态路由_第3张图片
model:
AntdPro+react 动态路由_第4张图片

BasicLayout里替换掉原有用的route

AntdPro+react 动态路由_第5张图片
将文件中的routemenu中的menuData替换掉,文件其他引用的地方记得同步替换

————————

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

你可能感兴趣的:(web前端,react,antd,react,antdPro)