（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.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 support    scrollBehavior: () => ({ 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 = 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

本文链接：https://www.kjpai.cn/news/2024-03-31/151567.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！