vue实现后台管理权限系统及顶栏三级菜单显示功能

vue实现后台管理权限系统及顶栏三级菜单显示功能实现后台管理权限系统及顶栏三级菜单显示功能

主要介绍了vue实现后台管理权限系统及顶栏三级菜单显示功能，本文图文并茂给大家介绍的非常详细，具有一

定的参考借鉴价值,需要的朋友可以参考下

•效果演示地址

项目demo展示

重要功能总结重要功能总结

权限功能的实现权限功能的实现

权限路由思路：权限路由思路：

['editor']},及表示只有"editor"可以看到该菜单。

2.通过router.beforeEach()和router.afterEach()进行路由过滤和权限拦截；

代码如下:

// permission judge function

function hasPermission(roles, permissionRoles) {

if (roles.indexOf('admin') >= 0) return true // admin permission passed directly

if (!permissionRoles) return true

return roles.some(role => permissionRoles.indexOf(role) >= 0)

}

const whiteList = ['/login'] // 不重定向白名单

})

// 点击登录时，拿到了token并存入了vuex;

if (getToken()) {

/* has token*/

if (store.getters.isLock && to.path !== '/lock') {

next({

path: '/lock'

})

NProgress.done()

} else if (to.path === '/login') {

store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表

router.addRoutes(store.getters.addRouters) // 动态添加可访问权限路由表

next({ ...to, replace: true }) // hack方法 确保addRoutes已完成

})

}).catch((err) => {

store.dispatch('FedLogOut').then(() => {

Message.error(err || 'Verification failed, please login again')

next({ path: '/' })

})

})