前端路由表角色权限管理，通过登录不同角色侧边栏显示对应页面
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