vue-element-admin自定义路由权限动态刷新侧边栏

一、情况说明

  本教程是在vue-element-template基础上，参考vue-element-admin进行编写说明。

二、操作步骤

1、在@/store/modules文件夹下添加permission.js文件

import { asyncRoutes, constantRoutes } from '@/router'
/**
 * Use meta.perms to determine if the current user has permission
 * @param perms
 * @param route
 */
function hasPermission(perms, route) {
  if (route.meta && route.meta.perms) {
    return perms.some(perm => route.meta.perms.includes(perm))
  } else {
    return true
  }
}
/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param perms
 */
export function filterAsyncRoutes(routes, perms) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(perms, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, perms)
      }
      res.push(tmp)
    }
  })
  return res
}
const state = {
  routes: [],
  addRoutes: []
}
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}
const actions = {
  generateRoutes({ commit }, perms) {
    return new Promise(resolve => {
      let accessedRoutes
      if (perms.includes('*')) { // 填入超级管理员权限值，我这里自定义超级管理员权限为*，能访问所有路由
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, perms)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

修改@/store/getters.js文件，在getters变量中添加permission_routes，具体示例如下：

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles,
  permission_routes: state => state.permission.routes // 添加的权限路由值
}
export default getters

2、修改@/router/index.js文件

  这里的路由分为两种，constantRoutes 和 asyncRoutes。vue-element-template默认只添加了constantRoutes，asyncRoutes需要另外单独添加，格式与constantRoutes一样。
constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。
asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
添加asyncRoutes变量

. . .
/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes = [
  {
    path: '/system',
    component: Layout,
    redirect: '/system/user',
    name: 'system',
    meta: {
      title: '系统管理',
      icon: 'nested',
      perms: ['*']  // 添加可访问此路由的权限
    },
  },
]
 . . .

若有存在子路由，可同样在子路由中添加meta属性，内部使用perms添加可访问此路由的权限

3、添加权限路由，修改@/permission.js文件

 . . .
          // get user info
          // note: perms must be a object array! such as: ['admin'] or ,['developer','editor']
          const { perms } = await store.dispatch('user/getInfo')  // @/store/modules/user.js中对应获取登录用户信息的接口
          // generate accessible routes map based on roles
          const accessRoutes = await store.dispatch('permission/generateRoutes', perms )
          // dynamically add accessible routes
          router.addRoutes(accessRoutes)
          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })
 . . .

4、动态加载侧边栏

  修改@/layout/components/Sidebar/index.vue文件，这里变量名为permission_routes，对应着@/store/getters.js文件中的变量名，可自定义修改