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

 

iview-admin动态路由之方法二

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

1、vuex

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

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

user.js

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

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

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

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

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

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

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

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

 

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

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

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

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

2、main

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

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