路由合并 后台管理系统的权限分配功能如何实现?

231 阅读1分钟

后台项目导航权限控制

导航权限控制的介绍:
  由于在后台管理中,有不同角色进行使用,所以就会有不同权限。
  我们可以给用户分配不同角色,不同角色分配不同权限。根据用户
  的权限进行页面左侧功能的渲染。 	

首先在vuex中进行操作,使用vuex模块化,在modules创建一个文件,然后我们在这个模块中进行逻辑操作。

导入静态路由,state数据中声明一个数组。在actions中定义一个过滤路由的异步方法,在这个异步方法中,有两个参数,一个context上下文,和接收的参数menus这个是接收的参数。然后在这个方法中定义个空数组循环变量获取的数据,然后过滤动态路由的参数中,name==menus参数通过push添加到刚刚创建的这个数组中。 然后通过commit调用mutations方法,传递这个数组。并且return这个数组。 然后方法中再把静态路由和处理完成传递过来的动态路由进行合并。 vuex中就已经完成。

在路由拦截中的判断条件内,判断如果没有用户信息,就执行vuex中的异步获取用户资料的方法,同时执行刚刚定义的过滤路由的方法并且把请求到的用户资料roles结构出来传递给异步方法。然后过滤这个异步方法返回给我们的信息。通过addRoutes添加给router路由。最后再next(to.path)进行放行。

image.png