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

最新推荐文章于 2024-03-31 23:10:00 发布

๑柯帆๑

最新推荐文章于 2024-03-31 23:10:00 发布

阅读量2.7k

点赞数 7

分类专栏： vue design pro vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41299955/article/details/119807405

版权

1 篇文章 0 订阅

订阅专栏

前言

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

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

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

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

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

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

权限流程图

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

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

调取接口获得权限列表

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

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

拼装完毕返回结果

拿到结果存到vuex

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

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

获取用户详情的接口需要有role字段或者改为其他判断条件都可以留着以后换实现方法1 也可以兼容
获取nav 权限列表时需要注意
权限管理页面就可以根据官方给的页面做就行了需要注意的是
component 字段再父路由根据需要可设置 BlankLayout(页面啥样就啥样),
RouteView(适用于分路由的页面,有坑,需要跟redirect 重定向配合使用) ,PageView(加了页头导航的样式)
redirect 重定向不能重定向到当前路由会报错
src/router/generator-routers.js的 rootRouter 根级目录

以上就是动态路由的流程了如有错误,麻烦指正,有什么问题,也可评论询问!

关注