（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 = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
/* Layout */
import Layout from '@/layout'

//所有人可见
export const 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 }
]

//相应权限人员可见
export const 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']
        }
      }
    ]
  }
]

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  })

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default 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
 */
function hasPermission(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 {
        return true
    }
}

/**
 * 将符合相应权限的路由表筛选出来
 * @param routes asyncRouterMap
 * @param role
 */
export function filterasyncRouterMap(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) {
            return new Promise(resolve => {
                let accessedRoutes
                //如果角色是admin
                if (role.includes('admin')) {
                //将route.js中的admin权限人员可见的路由表加入，此处我们只有admin和editor两个角色
                    accessedRoutes = asyncRouterMap || []
                } else {
                    accessedRoutes = filterasyncRouterMap(asyncRouterMap, role) || []
                }
                commit('SET_ROUTES', accessedRoutes)
                resolve(accessedRoutes)
            })
        }
    }

}

export default 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