（vue权限管理）前端路由表角色权限管理，通过登录不同角色侧边栏显示对应页面

前端路由表角色权限管理，通过登录不同角色侧边栏显示对应页面

demo根据vue-admin-template为基础修改，首先展示实现的效果

1. 首先在src/router/index.js中添加路由表，其中constantRoutes 设置的为所有角色可见的路由，asyncRouterMap为对应权限人员可见路由，demo路由表代码如下:

import Vue from'vue'import Router from'vue-router'

Vue.use(Router)//避免导航守卫报错const originalPush =Router.prototype.push
Router.prototype.push=functionpush(location, onResolve, onReject){if(onResolve || onReject)returnoriginalPush.call(this, location, onResolve, onReject)returnoriginalPush.call(this, location).catch(err=> err)}/* Layout */import Layout from'@/layout'//所有人可见exportconst constantRoutes =[{path:'/login',component:()=>import('@/views/login/index'),hidden:true},{path:'/404',component:()=>import('@/views/404'),hidden:true},{path:'/',component: Layout,redirect:'/dashboard',children:[{path:'dashboard',name:'Dashboard',component:()=>import('@/views/dashboard/index'),meta:{title:'首页',icon:'dashboard'}}]},{path:'/example',component: Layout,children:[{path:'index',name:'Table',component:()=>import('@/views/table/index'),meta:{title:'所有人可见',icon:'table'}}]},// 404 page must be placed at the end !!!{path:'*',redirect:'/404',hidden:true}]//相应权限人员可见exportconst asyncRouterMap =[{path:'/form',component: Layout,children:[{path:'index',name:'Form',component:()=>import('@/views/form/index'),meta:{title:'所有人可见',icon:'form',role:['admin']}}]},{path:'/system',component: Layout,redirect:'system/test',name:'System',alwaysShow:true,meta:{title:'系统管理',icon:'nested',role:['admin','editor']},children:[{path:'权限管理',name:'test',name:'Test',component:()=>import('@/views/system/index'),meta:{title:'权限修改',icon:'table',role:['admin']}}]}]constcreateRouter=()=>newRouter({// mode: 'history', // require service supportscrollBehavior:()=>({y:0}),routes: constantRoutes
  })const router =createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465exportfunctionresetRouter(){const newRouter =createRouter()
  router.matcher = newRouter.matcher // reset router}exportdefault router

2.在src/api/user.js中创建用户登录，获取用户信息，以及登出的接口

3.在store/modules/user.js文件，添加获取角色权限role的信息

4.在src/store/modules/目录下创建permission.js，来存储不同权限动态添加的路由表，文件代码如下：

import{ asyncRouterMap, constantRoutes }from'@/router'/**
 * Use meta.role to determine if the current user has permission
 * @param role
 * @param route
 */functionhasPermission(role, route){if(route.meta && route.meta.role){// return roleArr.some(role => route.meta.role.includes(role))  //当给的角色权限为数组形式可采取该方式判断返回值return route.meta.role.includes(role)?true:false//当角色权限为字符串时，采用该方式判断}else{returntrue}}/**
 * 将符合相应权限的路由表筛选出来
 * @param routes asyncRouterMap
 * @param role
 */exportfunctionfilterasyncRouterMap(routes, role){const res =[]
    routes.forEach(route=>{const tmp ={...route }if(hasPermission(role, tmp)){
            console.log(111);if(tmp.children){
                tmp.children =filterasyncRouterMap(tmp.children, role)}
            res.push(tmp)}})return res
}const permission ={state:{routes:[],addRoutes:[]},mutations:{SET_ROUTES:(state, routes)=>{
            state.addRoutes = routes
            state.routes = constantRoutes.concat(routes)}},actions:{generateRoutes({ commit }, role){returnnewPromise(resolve=>{let accessedRoutes
                //如果角色是adminif(role.includes('admin')){//将route.js中的admin权限人员可见的路由表加入，此处我们只有admin和editor两个角色
                    accessedRoutes = asyncRouterMap ||[]}else{
                    accessedRoutes =filterasyncRouterMap(asyncRouterMap, role)||[]}commit('SET_ROUTES', accessedRoutes)resolve(accessedRoutes)})}}}exportdefault permission

5.在src/store/getters.js中，代码如下（注意：state.permission.routes别写成了state.user.routes）：

6.在src/store/index.js中，代码如下

7.最后在src/permission.js的路由导航守卫中添加动态路由，此处用到了vue-router的addRoute函数，修改处代码如下：

8.在src/layout/components/Sidebar/index中，添加新的路由表，代码如下：

最终可以实现文章首部动图效果，简单的记录下前端路由表权限管理功能实现，若有不正确处，评论处可交流讨论，文末会贴源码，安装依赖后可直接运行。

文末demo码云链接：权限管理demo