前言

官方提供了两种实现权限的方法 官网地址
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

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

流程3 src/permission.js

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

流程4 src/permission.js

1. 调用 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 根级目录
  
  以上就是动态路由的流程了 如有错误,麻烦指正,有什么问题,也可评论询问!

ant design pro vue 动态路由 流程详解相关推荐

1. ant design pro实现动态路由以及权限的控制

   dynamic-menu-router ant design pro动态路由权限,目前基于ant design pro1.4.4版本,只用于左侧菜单权限的设置和按钮权限设置,关于最新版本权限的更新,敬 ...

2. ant design pro vue左侧菜单自定义图标

   做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标 在src/ ...

3. Ant Design Pro Vue使用心得

   目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...

4. Ant Design Pro Vue 登录后userInfo存在vuex问题

   问题描述: 作者发现使用Ant Design Pro中存在一个问题,页面刷新后vuex数据丢失,导致UserInfo找不到影响页面的问题,故而写此文,望能助有需之人. 原因分析: 提示:Vuex的机制 ...

5. Ant Design Pro 4 动态菜单icon丢失解决办法

   最近在开发人事管理系统,其中菜单是需要动态渲染,针对不同角色授权不同的菜单权限. 路由由后端返回,格式如下: [ { "path": "/", "na ...

6. Vue 权限菜单（动态路由）详解

   今天记录一下Vue的权限菜单(动态路由),在我们写后台的时候用的比较多,Vue的权限菜单分两种,一种是通过本地进行,根据账号的权限进行筛选出可用的权限,组合菜单并在页面上渲染显示,另一种是根据登录的账 ...

7. 动态路由 OSPF详解

   ospf RFC2328 简介 开放式最短路径优先(Open Shortest Path First,OSPF)是广泛使用的一种动态路由协议,它属于链路状态路由协议,具有路由变化收敛速度快.无路由环路 ...

8. react 项目环境搭建和ant design组件使用全攻略详解

   首先创建项目 create-react-app project 创建一个名字为project的web项目 npm install jquery或者yarn add jquery(这里如果不需要jque ...

9. Ant Design Pro 跳转路由 传参数，接收参数

   umi/link 通过声明的方式做路由跳转. 例子: import Link from 'umi/link';export default () => {<div>/* 普通使用 * ...

最新文章

1. Java黑皮书课后题第8章：8.18（打乱行）编写一个方法，使用下面的方法头打乱一个二维int型数组的行。编写一个测试程序，打乱下面的矩阵
2. Eclipse常用的快捷方式
3. 于金刚消息引擎服务器,基于MQTT的安全通信服务器的研究与实现
4. 发条js调试工具_【转载】移动端js调试工具：eruda
5. python车牌字符分割_OpenCV+Python识别车牌和字符分割的实现
6. xticks函数--Matplotlib
7. 《《《总结》》》PCL的42个实例整理：1～24
8. ubuntu20.04设置静态IP地址
9. 才发现Nero8出现了问题
10. ll和 amp amp c语言,ll 和 java
11. Win10中英文切换 win键+空格
12. 获取字符串被分割后的总数组长度 java 类似UBound()方法
13. MATLAB中均值、方差、均方差的计算方法
14. NOI——Bless All
15. 奥利给! loading效果这么搞真的太棒了
16. Python（5）：上机练习——创建一个类People
17. mysql日志文件名字_MySQL各类日志文件相关变量介绍
18. 新手必看！EEGLAB工具包下载、安装及数据导入教程
19. java读取word的插件,java word 插件
20. C++ stack pop()返回值 error: cannot initialize a variable of type ‘int‘ with an rvalue of type ‘void‘

热门文章

1. 美国政府公布《网络空间国际战略》
2. SpringBatch历史数据的清理方案及实现
3. 用python实现冒泡算法
4. excel中隐藏列，隐藏行，增加列，取消隐藏，调节列宽
5. 错误： error: C2001: 常量中有换行符
6. 携创教育：成人自考大专需要什么条件？要几年拿证？
7. Ubuntu引导自动修复
8. 乔老爷子在去世前为后世文明埋下了一个浪漫的符号——MacBook 上隐藏了 比特币 的白皮书 (内含打开方法)...
9. Guacamole桌面虚拟化介绍和安装使用
10. 2020年较好的进销存软件该怎么选择