Vue+ant-design-pro（2）动态路由
第一篇文章简单的介绍了一下ant-design-pro，关于项目的搭建，我想官网的文档已经写得很清楚了，这里就不多做赘述了，这篇文章，我们来探讨一下ant-design-pro的动态路由。
动态路由首先是和用户登录权限挂钩了，不同的角色权限，看到不同的路由菜单，当用户登录后得到roles（角色），前端根据roles（角色）去向后端发起请求，获取可访问的路由数据，从而生成可访问的页面，然后把router.addRoutes动态挂载到router上，这就生成了动态路由。这是在官网文章中动态路由的介绍。
（1）后端获取的路由数据
当用户登录账号登录后，就会获取到用户的基本信息，包括角色信息，案例如下：
根据角色，再获取该角色下可访问的路由表，案例数据如下：
后端返回一个对象数组，很显然，这种数据结构不是我们路由中的所需要的结构方式，在官网的文档介绍中，可以得知，路由格式为：
（2）数据结构的处理
所以，根据后端返回的数据，我们要做数据处理，由于公司保密需要，这里我只能使用虚拟数据给大家展示一下，
const routerData = [{id: 101,parentId: 0,menuName: 'system',menuUrl: '',component: 'RouteView',redirect: '/system/organization',type: '',param: '',sort: '',hidden: '',menu_describe: '系统管理'
},
{id: 10101,parentId: 101,menuName: 'organization',menuUrl: '/system/organization',component: 'Organization',redirect: '',type: '',param: '',sort: '',hidden: '',menu_describe: '组织管理'
},
{id: 10102,parentId: 101,menuName: 'personnel',menuUrl: '/system/personnel',component: 'Personnel',redirect: '',type: '',param: '',sort: '',hidden: '',menu_describe: '人员管理'
},
{id: 10103,parentId: 101,menuName: 'roles',menuUrl: '/system/roles',component: 'Roles',redirect: '',type: '',param: '',sort: '',hidden: '',menu_describe: '角色管理'
},
{id: 10102,parentId: 101,menuName: 'menu',menuUrl: '/system/menu',component: 'Menu',redirect: '',type: '',param: '',sort: '',hidden: '',menu_describe: '菜单管理'
},
{id: 301,parentId: 0,menuName: 'testRouter',menuUrl: '',component: 'testRouter',redirect: '/testRouter',type: '',param: '',sort: '',hidden: '',menu_describe: '测试路由'
},
{id: 30101,parentId: 301,menuName: 'test-router',menuUrl: '',component: 'testRouter',redirect: '',type: '',param: '',sort: '',hidden: '',menu_describe: '测试路由'
}
]这里是一段路由数据，和我后端返回的数据格式是一样的，要把数组处理成树形结构，在上面的图片和虚拟数据中，可以看出我标志的两个字段，id和parentId，是的，这两个字段就是把数据处理成父子树形结构的关键，代码如下：
/*** 数组转树形结构* @param list 源数组* @param tree 树* @param parentId 父ID*/
const listToTree = (list, tree, parentId) => {list.forEach(item => {// 判断是否为父级菜单if (item.parentId === parentId) {const child = {...item,key: item.key || item.name || item.menuName,children: []}// 迭代 list， 找到当前菜单相符合的所有子菜单listToTree(list, child.children, item.id)// 删掉不存在 children 值的属性if (child.children.length <= 0) {delete child.children}// 加入到树中tree.push(child)}})
}经过listToTree方法的处理后，路由数据变成了一下格式：
有五个父级导航栏，每个父级导航栏下有几个子级导航栏，如下图：（这里还没有处理成下面这种方式）
（3）生成vue-router层级路由表
经过第二步的处理，后端返回的数组路由数据已经被处理成了tree树形结构，但是还不能直接运用到vue-router菜单中，还需要下面一次处理，即：格式化树形结构数据，生成vue-router层级路由表，代码如下：
/*** 格式化树形结构数据 生成 vue-router 层级路由表** @param routerMap* @param parent* @returns {*}*/export const routerGenerator = (routerMap, parent) => {return routerMap.map(item => {// console.log("
Vue+ant-design-pro（2）动态路由相关推荐
- ant design pro实现动态路由以及权限的控制
dynamic-menu-router ant design pro动态路由权限,目前基于ant design pro1.4.4版本,只用于左侧菜单权限的设置和按钮权限设置,关于最新版本权限的更新,敬 ...
- Ant Design Pro 4 动态菜单icon丢失解决办法
最近在开发人事管理系统,其中菜单是需要动态渲染,针对不同角色授权不同的菜单权限. 路由由后端返回,格式如下: [ { "path": "/", "na ...
- Ant Design Pro 跳转路由 传参数，接收参数
umi/link 通过声明的方式做路由跳转. 例子: import Link from 'umi/link';export default () => {<div>/* 普通使用 * ...
- ant design pro vue 动态路由 流程详解
ant design pro vue 动态路由 流程详解 前言 流程图 流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
- Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）
Ant Design Pro of Vue方案一权限路由配置(一步步完成,包括所有后端数据库代码,萌新向) 参考了许多csdn的文章,感谢大家为社区做的贡献,我也来汇总一波,谢谢
- Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
- 搭建Vue版Ant Design Pro后台管理系统
搭建Vue版Ant Design Pro后台管理系统 此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端 相关文档链接 1.[Ant Design Pro of ...
- ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标 在src/ ...
- Ant design pro v4-服务器菜单和路由权限控制
要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...
- Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...
最新文章
- 消息中间件的多个企业级场景案例--分析
- Jenkins持续集成输出html测试报告
- python安装教程win8-python 2.7在win8.1上安装的方法
- 怎么学python知乎_你是怎么学习Python的 ？
- 年底大会火爆，看“瑶台”如何搭建一场高质量沉浸式大会
- GO结构体之间的转换
- 你离黑客的距离，就差这20个神器了
- gpu版tensorflow测试
- apache服务器详细配置
- 10年老分析师最终抛弃Excel，它不是最好的数据分析工具
- JFinal（一）JFinalConfig
- pyqt5多进程 python_Python 多进程大全
- 斗鱼 Juno 监控中心的设计与实现
- Win7安装IIS出错，总是提示“出现错误。并非所有的功能被成功更改。”
- Python反转链表
- bugkuCTF 乌云邀请码 write up【橘小白】
- Java：使用Java调用打印机进行打印（JPG、PDF和Word三种文件格式）
- console的基础使用
- AutoCAD家具设计入门到精通视频教程
- 实用 Windows 软件系列分享（五）
热门文章