Vue拿到数据之后如何做用户鉴权和动态侧边栏

主要流程

 

代码分析

Vuex

首先判断是否为超级管理员，如果是则直接把整个动态路由返回；如果不是，进行判断。

 

判断函数，递归判断当前登录用户的角色和路由的角色是否匹配，如果匹配，则加入数组中，最后返回整个数组。

 

 

判断函数：通过路由元信息判断是否拥有相应的路由权限

 

 

 

 

 VueRouter

在全局导航守卫中，通过调用Vuex的方法拿到动态路由数组，调用router.addRouter方法将路由数组添加进路由中。

 

 有个细节：最后需要将404错误页面也动态添加到路由中，否则404页面不能匹配到路径错误的页面。