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

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.pushRouter.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 supportscrollBehavior: () => ({ y: 0 }),routes: constantRoutes})const router = createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465export 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 = routesstate.routes = constantRoutes.concat(routes)}},actions: {generateRoutes({ commit }, role) {return new Promise(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)})}}}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