Front-end routing table role permission management, display the corresponding page by logging in to the sidebar of different roles
The demo is modified based on the vue-admin-template, and first shows the effect of the implementation
1. First, add a routing table in src/router/index.js, where constantRoutes is set to be the route visible to all roles, and asyncRouterMap is the route visible to the corresponding authorized personnel. The demo routing table code is as follows:
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. Create an interface for user login, user information acquisition, and logout in src/api/user.js
3. In the store/modules/user.js file, add the information of obtaining the role permission role
4. Create permission.js in the src/store/modules/ directory to store the dynamically added routing tables with different permissions. The file code is as follows:
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. In src/store/getters.js, the code is as follows ( note: state.permission.routes should not be written as state.user.routes ):
6. In src/store/index.js, the code is as follows
7. Finally, add a dynamic route to the route navigation guard in src/permission.js. The addRoute function of vue-router is used here. The modified code is as follows:
8. In src/layout/components/Sidebar/index, add a new routing table, the code is as follows:
In the end, you can achieve the animation effect of the first part of the article, and simply record the realization of the front-end routing table authority management function. If there are any inaccuracies, you can exchange and discuss them in the comments. The source code will be posted at the end of the article, and you can run it directly after installing dependencies.
Demo code cloud link at the end of the article: permission management demo