精选文章 iview-admin 动态路由之access数组后端控制

iview-admin 动态路由之access数组后端控制

作者:weiyangg23 时间: 2020-07-28 01:48:39
weiyangg23 2020-07-28 01:48:39

 

iview-admin动态路由之方法二

最近项目中遇到了细化权限模块的需求,原来的权限模块用的静态的是router.js里每个节点的access数组配合登陆时返回的user.access来渲染左侧菜单的,那你会问了:如何实现动态路由呢?一开始这也是我的问题,于是我先用百度google了一下,发现所有人都说有两种方法,但是不知为什么都只给出了第一种方法,即从后端返回整个动态router对象然后再和基础路由混合。这种方法有两个缺点,一是要在后端组复杂的router对象,二是前端还要写复杂的函数把动态路由和基础路由融合,总之一个字:麻烦,而且也不符合面向对象设计原则,所以我决定给出所谓的第二种方法:即利用权限数组,把用户的权限数组和菜单的权限数组进行匹配,如果匹配则显示的方法。当然这一切都是基于ivew-admin的路由守卫来做的,即是说不管是登陆还是刷新时都会重新检测router,而我们也是在这个时候从后端取回一个菜单的权限字典,并把原来router里的所有具有access属性的节点重新赋值,也就实现了所谓的动态路由(这也是把路由的创建和赋权解耦的一种做法,我个人还是觉得这样更合理一点)干说你肯定是不明白的,让我细细道来。

1、vuex


这个东东可谓是功不可没,要问他是干什么的我也说不清楚,不过要实现登陆后用户信息的存储全靠他了,先上代码感受一下,别老整这抽象的(如果你见过下面这个画面的话那么理解起来就会很轻松否则...)

iview-admin 动态路由之access数组后端控制1

靠的就是他的小弟Vuex.store看见了没他还有一个变体就是$store(这是后话),这个小弟把他的小小弟们全都暴露给了待渲染的页面,给我们与后端交互造成了严重的便利(掌声)下面看一下他的左膀右臂user.js和app.js,先看左膀

user.js

顾名思义,用户相关,先看一下他引入了什么

iview-admin 动态路由之access数组后端控制2这里借用了@/api/user的getUserInfo这个别的帮派的小弟,他的功能就是从后端数据库取回相关的用户信息(当然这是我们自己的后端,和iviewadmin没半毛钱关系,但是符合iviewadmin的自带的用户信息数据格式)他取回的数据中一定要有这么两个数组一个是用户自己的权限数组,另一个是所有菜单项的权限数组,这两个数组就是我们实现动态菜单的关键,先按下不表,接着看export,看他对外提供了什么服务,继续上图

iview-admin 动态路由之access数组后端控制3

state这个小弟就是所有的用户信息状态的容器他的三个小弟弟access,menuaccess,和menurouter(iview-admin原生没有这三个属性,是我为了实现动态路由添加的)就是从后端取回的数据的存放处,分别对应用户权限,菜单权限,和修改后的菜单路由,那他们是通过什么方法存放进去的呢继续看另一个小弟mutations

iview-admin 动态路由之access数组后端控制4

我们给他扩充两个小弟弟setAccess,和setMenu。这两个小弟弟就是存储用户权限和菜单权限的方法,这里要讲解一下setMenu方法,首先看routers,他是从哪来的呢,其实就是引入的静态的routers.js,她其实就是一个数组,有图为证

iview-admin 动态路由之access数组后端控制5

看到没,我们要做的就是把后端娶回来的菜单权限分别给他的access属性赋上去,(当然你得在维后端护一张菜单权限表,也就是我们要实现动态路由的后端基础)
这回懂了吧, routers[2].meta.access=menuaccess[0]这句我就不讲了,还是那句话清者自清,接下来 state.menurouter=routers就完成了把新路由存储到state这个小弟的menurouter里的目的,(这不懂可以看看上图,懒得翻的话就看下图)

iview-admin 动态路由之access数组后端控制6

这里我只是举个例子所以只给一个节点赋了access值,当然你可以遍历所有节点,按照数组的索引一一赋值。

你又要问了方法是定义了,那在哪调用的呢别急咱么继续介绍小弟

iview-admin 动态路由之access数组后端控制7

挠,就是他,(两个同名的getUserInfo第一个是我们要介绍的这个自己的小弟,第二个就是那个别的帮派的小弟(我们自己的后端接口)现在真相大白了吧,还是那句话讲给有缘人听如果你还是不懂我也没有办法,毕竟是写给我自己看的。现在你已经可以在vue的实例里面获得用户权限和菜单权限了,当然是通过$store.state.user.acces和$store.state.user.menurouter。但是
我们不会这样取值因为没有用,那怎样才有用呢,我们继续介绍上面提到的右臂app.js废话不说先上图:

iview-admin 动态路由之access数组后端控制8

 

原谅我这一生不羁放纵爱自由,还是老规矩先看引入,@/libs/util这又是另一个帮派了,没错就是他的小弟getMenuByRouter,我们还得借用一下,继续上图

iview-admin 动态路由之access数组后端控制9

这里的list就是所有菜单的路由,access就是用户的权限数组,就是这位兄弟实现了菜单的渲染,大体上就是判断list的每个children如果其access里包括参数里的access就渲染否则就干掉,插叙一下,再回到app.js看一下他是怎么把这个getMenuByRouter暴露给使用者的。继续上图

iview-admin 动态路由之access数组后端控制10


原方法被我注释掉了,参数里的routers被替换成了rootstate.user.menurouter,也就是我们之前存储的修改过权限的路由,(写到这懂得朋友已经不用再看下去了,下面写给不懂得朋友和我自己)没错就是这个getters兄弟的小弟menuList,谁得到他谁就可以渲染菜单了,多补一图说明怎么暴露给外部的

iview-admin 动态路由之access数组后端控制11

这样通过$store.getter.menuList就可以拿到他了(不懂得朋友可以看依稀nodejs模块的引用规则就明白了)那么又是谁拿到他了呢?下面介绍另一位大哥

2、main

其实到这已经实现了动态路由了,但是还是来个全套的吧,把调用栈介绍完整

iview-admin 动态路由之access数组后端控制12

iview-admin 动态路由之access数组后端控制13

这位兄弟是所有组件的父组件所以渲染菜单的责任自然落到他身上了,好了到这也就完事了,欢迎各位大神指正,有不到之处欢迎赐教。

 

 

 

 

 

 

 

 

   

 

 

 

 

 

 


 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:字母卡片C++

下一篇:js异步 浏览器加载渲染与js加载

您可能感兴趣

  • 华为---设备基本配置

    一、华为设备的知识点 (1)链路聚合概述; (2)成员接口; (3)链路聚合模式; (4)活动接口与非活动接口; (5)主动端与被动端; (6)负载均衡模式; (1)链路聚合概述 链路聚合(link aggregation)是将多个物理接口当做一个逻辑接口,以增加带宽和提供线路冗余。链路聚合的带宽理论上相当于所包含的物理接口带宽总和,非常适用于企业核心网络中,同时参与捆绑的某个成员接口或链路...

  • Haddoop大数据教程笔记_08_Hive搭建及使用

    目录 Hive 操作笔记 Hive 安装 1、Mysql安装(hive元数据记录可以使用内嵌derby数据库,但一般选择MySQL) 2、hive安装: 3.hive使用方式 最基本使用方式 启动一个hive交互shell 启动hive服务使用 脚本化运行 4.hive建库建表与数据导入 4.1.建库 4.2.建表 5.hive查询语法 6.hive常见参数 7.hive 其他常用操作: H...

  • Kubernetes多节点二进制线网部署(实例!!!)

    前情回顾 部署K8s多节点,首先得署单节master的k8s群集 详情参考: blog.csdn.net/caozhengtao1213/article/details/103987039 本篇内容 1.部署Master2 2.Nginx负载均衡部署-keeplived服务 3.node节点修改配置文件统一VIP 4.创建Pod 5.创建UI显示界面 环境准备 角色 地址 安装组件 mast...

  • 揭开NoahV智能运维前端框架的神秘面纱

    作者简介 莫海艳 百度资深前端研发工程师 百度智能运维(Noah)产品前端技术方向负责人,在运维数据可视化、中后台前端解决方案等方向上,有着丰富的实践经验。 干货概览 众所周知,前端有三大主流框架:Vue、React、Angular,这些前端框架可以帮助我们快速搭建项目,但是我们在实际项目中往往还需要投入很大精力去使用其他代码库与应用作为补充支持(如:需要一些基础的UI组件库,需要HTTP请...

  • 3万字通俗易懂告诉你什么是.NET?什么是.NET Framework?什么是.NET Core?

    通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念,先从类型系统开始讲起,我将通过跨语言操作这个例子来逐渐引入一系列.NET的相关概念,这主要包括:CLS、CTS(CLI)、FCL、Windows下CLR的相关核心组成、Windows下托管程序运行...

  • 深入原理64式:28 kubernetes知识总结

    目标: 整理kubernetes知识,主要包含如下内容: 1、kubernetes网络模型 2、kubernetes原理 3、kubernetes架构 4、kubernetes应用场景 5、kubernetes基础 6、helm charts基础 7、kubernetes/helm/docker常用命令 第一部分: kubernetes网络模型 1 kubernetes网络模型是什么? 每个...

  • Pomelo

    Pomelo(柚子)是基于Node.js的高性能分布式游戏服务框架,它包含基础的开发框架和相关的扩展组件(库和工具包)。Pomelo不但适用于游戏服务器开发也可以用于开发高实时的Web应用,它的分布式架构使Pomelo比普通实时Web框架性能更好。 Pomelo是游戏服务器框架,本质上也是高实时、高扩展、多进程的应用框架,除了在提供的库部分有游戏专用的库,其余部分框架完全可用于开发高实时的应...

  • PHP代码安全有必要了解下

    攻击者通过构造恶意SQL命令发送到数据库,如果程序未对用户输入的 SQL命令执行判断过滤,那么生成的SQL语句可能会绕过安全性检查,插入其他用于修改后端数据库的语句,并可能执行系统命令,从而对系统造成危害 例如删除 id 为 1 的帖子,sql 如下: $post_id = $_POST['post_id']; $sql = "DELETE FROM posts WHERE user_id...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。