element ui 菜单封装_用vue2.0全家桶+element-ui+mockjs 实现后台管理权限系统及顶栏三级菜单显示...

手摸手，带你用vue实现后台管理权限系统及顶栏三级菜单显示

项目demo展示

重要功能总结

权限功能的实现

权限路由思路：

根据用户登录的roles信息与路由中配置的roles信息进行比较过滤，生成可以访问的路由表，并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表，从而实现左侧和顶栏菜单的展示。

实现步骤：

1.在router/index.js中，给相应的菜单设置默认的roles信息；

如下：给"权限设置"菜单设置的权限为：meta：{roles: ['admin', 'editor']}，及不同的角色都可以看到； 给其子菜单"页面权限",设置权限为：meta：{roles: ['admin']},及表示只有"admin"可以看到该菜单； 给其子菜单"按钮权限"设置权限为：meta：{roles: ['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'] // 不重定向白名单

router.beforeEach((to, from, next) => {

NProgress.start()

// 设置浏览器头部标题

const browserHeaderTitle = to.meta.title

store.commit('SET_BROWSERHEADERTITLE', {

browserHeaderTitle: browserHeaderTitle

})

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

if (getToken()) {

/* has token*/

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

next({

path: '/lock'

})

NProgress.done()

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

next({ path: '/' }) // 会匹配到path:'',后面的path:'*'还没有生成;

NProgress.done()

} else {

if (store.getters.roles.length === 0) {

store.dispatch('GetInfo').then(res => { // 拉取用户信息

const roles = res.roles

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: '/' })

})

})

} else {

// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓

if (hasPermission(stor