ant design pro vue 动态路由 流程详解

前言

官方提供了两种实现权限的方法 官网地址
1:前端路由表写死(设置权限标识) 根据后端返回的权限标识生成路由表
2:动态路由 路由表由后端返回 前端根据返回的 进行路由表的拼接

两种方法 在 src/store/index.js 里切换

// import permission from './modules/permission'
// 第一种 根据路由表里permissions 权限标识筛选/

//import permission from './modules/async-router'
// 第二种  路由表由后端返回

第一种 官方说的比较详细,直接看官方的就行

下面详细说下第二种 后端返回的路由表流程

流程图

流程1 src/permission.js

1. 进入 src/permission.js 的 路由守卫里
   从 if (store.getters.roles.length === 0) 开始 调取vuex里 获取个人信息接口
   

流程2 src/store/modules/user.js

2. 来到 src/store/modules/user.js 去掉不需要的内容(第一种权限实现的代码) 设置role 角色信息 根据角色信息 请求权限信息 在这里 后端根据token来查询权限 所以 下方请求权限时 不需要传角色信息 根据后端来设置是否传参
   

流程3 src/permission.js

3. 获取到 role 返回 src/permission.js

流程4 src/permission.js

4. 调用 src/router/generator-routers.js里的 GenerateRoutes 函数 获取权限

流程5 src/router/generator-routers.js

调取接口获得权限列表

流程6 src/router/generator-routers.js

传入同页面的 listToTree 函数和 generator 函数 进行路由拼装

流程7 src/router/generator-routers.js

重点在 根据后端返回具体字段 拼接前端路由表(需要在同页面上方定义好路由路径)


拼装完毕返回结果

流程8 src/store/modules/async-router.js

拿到结果存到vuex

流程9 src/permission.js

见图1 返回并增加路由 执行下面重定向 等逻辑

后端部分

数据库设置 权限表

完整需要 用户表 绑定角色表 角色表绑定权限表 下面是权限表的字段

接口返回格式

• 获取用户详情的接口 需要有role字段 或者 改为其他判断条件都可以 留着以后换实现方法1 也可以兼容

• 获取nav 权限列表时 需要注意
  

• 权限管理页面 就可以根据官方给的页面做就行了 需要注意的是
  component 字段再父路由根据需要可设置 BlankLayout(页面啥样就啥样),
  RouteView(适用于分路由的页面,有坑,需要跟redirect 重定向配合使用) ,PageView(加了页头导航的样式)

• redirect 重定向 不能重定向到当前路由 会报错

• src/router/generator-routers.js的 rootRouter 根级目录
  
  以上就是动态路由的流程了 如有错误,麻烦指正,有什么问题,也可评论询问!