vue-element-admin 动态菜单改造

vue-element-admin 是一款优秀后台前端解决方案，它基于 vue 和 element-ui实现。开源后台管理系统解决方案项目 Boot-admin的前端模块就是基于vue-element-admin开发而来。

作为一款纯前端的后台界面解决方案，vue-element-admin是通过遍历路由进行渲染，从而得到菜单列表的，我们可以在 router.js 中看到相关代码，即是路由也是菜单。

改造思路：实现前后端分离要求，服务端控制菜单是否显示，前端控制路由信息定义。前端开发时不需要找服务端来新增路由信息，后端不需要关心前端路由的父/子关系、图标等定义信息。

第1步.定义路由

在 src/router/index.js 中将不需要后台控制的路由定义在 constantRoutes 中，如 /login /404 等；而需要后台控制是否显示的路由定义在 asyncRoutes 中。asyncRoutes 中每个节点都添加 srvName 属性，通过它来和服务端返回的菜单信息进行关联。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/* 外部路由文件 */
import sysManageRouter from './modules/sysmanage.js'
import codeGeneratorRouter from './modules/codegenerator.js'
import myWorkRouter from './modules/mywork.js'

/**
 * 同步路由
 * 不需要后台权限控制的路由，所有角色均可操作
 */
export const constantRoutes = [{
  path: '/redirect',
  component: Layout,
  hidden: true,
  children: [{
    path: '/redirect/:path(.*)',
    component: () => import('@/views/redirect/index')
  }]
},
{
  path: '/login',
  component: () => import('@/views/login/index'),
  hidden: true
},
{
  path: '/auth-redirect',
  component: () => import('@/views/login/auth-redirect'),
  hidden: true
},
{
  path: '/404',
  component: () => import('@/views/error-page/404'),
  hidden: true
},
{
  path: '/401',
  component: () => import('@/views/error-page/401'),
  hidden: true
},
{
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  children: [{
    path: 'dashboard',
    component: () => import('@/views/dashboard/index'),
    name: 'Dashboard',
    meta: {
      title: '仪表板',
      icon: 'dashboard',
      affix: true
    }
  }]
},
]

/**
 * 异步路由
 * 基于后台动态控制的路由
 */
export const asyncRoutes = [
  /** 引入系统管理路由模块 **/
  sysManageRouter,
  /** 引入代码生成路由模块 **/
  codeGeneratorRouter,
  /** 引入工作流路由模块 **/
  myWorkRouter,

  // 404 page must be placed at the end !!!
  {
    path: '*',
    redirect: '/404',
    hidden: true
  }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})

const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

在 src/router/modules 目录下，新建路由子模块文件

• 系统管理 sysmanage.js
• 代码生成 codegenerator.js
• 工作流 mywork.js

sysmanage.js内容如下：

import Layout from '@/layout'

const sysManageRouter = {
  path: '/manage',
  name: 'SysManage',
  component: Layout,
  redirect: '/manage/basemanage/dictionary',
  srvName: '/api/system/auth/manage',
  meta: {
    title: '系统管理',
    icon: 'example'
  },
  children: [{
    path: 'basemanage',
    name: 'BaseManage',
    srvName: '/api/system/auth/manage/basemanage',
    component: () => import('@/views/manage/basemanage/index'),
    redirect: '/manage/basemanage/dictionary',
    meta: {
      title: '基础管理',
      icon: 'tree'
    },
    children: [{
      path: 'dictionary',
      name: 'DicManage',
      srvName: '/api/system/auth/manage/basemanage/dictionary',
      component: () => import('@/views/manage/basemanage/dictionary/index'),
      meta: {
        title: '字典管理',
        icon: 'tree'
      }
    },
    {
      path: 'region',
      name: 'DivManage',
      srvName: '/api/system/auth/manage/basemanage/region',
      component: () => import('@/views/manage/basemanage/region/index'),
      meta: {
        title: '区域管理',
        icon: 'tree'
      }
    },
    {
      path: 'organization',
      name: 'OrgManage',
      srvName: '/api/system/auth/manage/basemanage/organization',
      component: () => import('@/views/manage/basemanage/organization/index'),
      meta: {
        title: '组织管理',
        icon: 'tree'
      }
    },
    {
      path: 'employee',
      name: 'EmpManage',
      srvName: '/api/system/auth/manage/basemanage/employee',
      component: () => import('@/views/manage/basemanage/employee/index'),
      meta: {
        title: '人员管理',
        icon: 'tree'
      }
    }
    ]
  },
  {
    path: 'authmanage',
    name: 'AuthManage',
    srvName: '/api/system/auth/manage/authmanage',
    component: () => import('@/views/manage/authmanage/index'),
    redirect: '/manage/authmanage/menu',
    meta: {
      title: '权限管理',
      icon: 'tree'
    },
    children: [{
      path: 'menu',
      name: 'MenuManage',
      srvName: '/api/system/auth/manage/authmanage/menu',
      component: () => import('@/views/manage/authmanage/menu'),
      meta: {
        title: '菜单管理',
        icon: 'table'
      }
    }, {
      path: 'resource',
      name: 'ResourceManage',
      srvName: '/api/system/auth/manage/authmanage/resource',
      component: () => import('@/views/manage/authmanage/resource'),
      meta: {
        title: '功能管理',
        icon: 'table'
      }
    }, {
      path: 'user',
      name: 'UserManage',
      srvName: '/api/system/auth/manage/authmanage/user',
      component: () => import('@/views/manage/authmanage/user'),
      meta: {
        title: '用户管理',
        icon: 'tree'
      }
    },
    {
      path: 'role',
      name: 'RoleManage',
      srvName: '/api/system/auth/manage/authmanage/role',
      component: () => import('@/views/manage/authmanage/role'),
      meta: {
        title: '角色管理',
        icon: 'tree'
      }
    }, {
      path: 'userofrole',
      name: 'UserOfRoleManage',
      srvName: '/api/system/auth/manage/authmanagele/userofrole',
      component: () => import('@/views/manage/authmanage/userofrole'),
      meta: {
        title: '角色-用户',
        icon: 'tree'
      }
    }, {
      path: 'resourceofrole',
      name: 'ResourceOfRoleManage',
      srvName: '/api/system/auth/manage/authmanage/resourceofrole',
      component: () => import('@/views/manage/authmanage/resourceofrole/index'),
      meta: {
        title: '角色-功能',
        icon: 'tree'
      }
    }
    ]
  },
  {
    path: 'operationmanage',
    name: 'OperationManage',
    srvName: '/api/system/auth/manage/operationmanage',
    component: () => import('@/views/manage/operationmanage/index'),
    meta: {
      title: '运行管理',
      icon: 'tree'
    },
    children: [{
      path: 'online',
      name: 'OnlineManage',
      srvName: '/api/system/auth/manage/operationmanage/online',
      component: () => import('@/views/manage/operationmanage/online/index'),
      meta: {
        title: '在线用户',
        icon: 'tree'
      }
    },
    {
      path: 'job',
      name: 'JobManage',
      srvName: '/api/system/auth/manage/operationmanage/job',
      component: () => import('@/views/manage/operationmanage/job/index'),
      meta: {
        title: '定时任务',
        icon: 'tree'
      }
    },
    {
      path: 'task',
      name: 'TaskManage',
      srvName: '/api/system/auth/manage/operationmanage/task',
      component: () => import('@/views/manage/operationmanage/task/index'),
      meta: {
        title: '流程任务',
        icon: 'tree'
      }
    },
    {
      path: 'histask',
      name: 'HisTaskManage',
      srvName: '/api/system/auth/manage/operationmanage/task/his',
      component: () => import('@/views/manage/operationmanage/histask/index'),
      meta: {
        title: '历史任务',
        icon: 'tree'
      }
    },
    {
      path: 'log',
      name: 'LogManage',
      srvName: '/api/system/auth/manage/operationmanage/log',
      component: () => import('@/views/manage/operationmanage/log/index'),
      meta: {
        title: '系统日志',
        icon: 'tree'
      }
    },
    {
      path: 'nacos',
      name: 'nacos',
      srvName: '/api/system/auth/manage/operationmanage/nacos',
      component: () => import('@/views/manage/operationmanage/nacos/index'),
      meta: {
        title: 'Nacos',
        icon: 'link'
      }
    },
    {
      path: 'admin',
      name: 'admin',
      srvName: '/api/system/auth/manage/operationmanage/admin',
      component: () => import('@/views/manage/operationmanage/admin/index'),
      meta: {
        title: 'Admin',
        icon: 'link'
      }
    }
    ]
  },
  {
    path: 'definitionmanage',
    name: 'DefManage',
    srvName: '/api/system/auth/manage/definitionmanage',
    component: () => import('@/views/manage/definitionmanage/index'),
    meta: {
      title: '定义管理',
      icon: 'tree'
    },
    children: [
      {
        path: 'model',
        name: 'ModelManage',
        srvName: '/api/system/auth/manage/definitionmanage/model',
        component: () => import('@/views/manage/definitionmanage/model/index'),
        meta: {
          title: '模型管理',
          icon: 'tree'
        }
      },
      {
        path: 'process',
        name: 'ProcessManage',
        srvName: '/api/system/auth/manage/definitionmanage/process',
        component: () => import('@/views/manage/definitionmanage/process/index'),
        meta: {
          title: '流程管理',
          icon: 'tree'
        }
      },
      {
        path: 'drools',
        name: 'DroolsManage',
        srvName: '/api/system/auth/manage/definitionmanage/drools',
        component: () => import('@/views/manage/definitionmanage/drools/index'),
        meta: {
          title: '规则管理',
          icon: 'tree'
        }
      }
    ]
  },
  {
    path: 'datamaintain',
    name: 'DataMaintain',
    srvName: '/api/system/auth/manage/datamaintain',
    component: () => import('@/views/manage/datamaintain/index'),
    meta: {
      title: '数据处理',
      icon: 'tree'
    },
    children: [{
      path: 'sqlinput',
      name: 'SqlInput',
      srvName: '/api/system/auth/manage/datamaintain/sqlinput',
      component: () => import('@/views/manage/datamaintain/sqlinput/index'),
      meta: {
        title: '提交',
        icon: 'tree'
      }
    }, {
      path: 'sqlexec',
      name: 'sqlexec',
      srvName: '/api/system/auth/manage/datamaintain/sqlexec',
      component: () => import('@/views/manage/datamaintain/sqlexec/index'),
      meta: {
        title: '执行',
        icon: 'tree'
      }
    }]
  }
  ]
}
export default sysManageRouter

第2步.服务端接口定义

服务端接口返回数据格式如下：

@Data
public class MenuDTO {
    private String id;
    private String srvName;
    private Boolean show;
    private String accessControlStyle;
}

节点中 srvName 和前端的路由进行匹配，通过 show 属性来确定显示或隐藏。
服务端无需关心菜单的子/父级关系，只需要将所有的菜单信息输出一个数组即可。

    @GetMapping("/auth/user/menu")
    public List<MenuDTO> getMenus() throws Exception{
        BaseUser baseUser = UserTool.getBaseUser();
        List<MenuDTO> menuDTOList = resourceDataGetter.getMyselfMenuList(baseUser);
        return menuDTOList;
    }

第3步.定义 api 请求接口

在 src/api/ 目录下创建 menus.js

import request from '@/utils/request'
export function getMenus(token) {
  return request({
    url: '/api/system/auth/user/menu',
    method: 'get',
    params: { token }
  })
}

第4步.配置 store 调用

新增文件 src/store/modules/menus.js

import {
  Message
} from 'element-ui'
import {
  getMenus
} from '@/api/menu'
import {
  getToken
} from '@/utils/auth'
import {
  asyncRoutes
} from '@/router/index'

const getDefaultState = () => {
  return {
    token: getToken(),
    menuList: []
  }
}

const state = getDefaultState()

const mutations = {
  SET_MENUS: (state, menus) => {
    state.menuList = menus
  }
}

// 动态菜单定义在前端，后台只会返回有权限的菜单列表，通过遍历服务端的菜单数据，没有的将对于菜单进行隐藏,前端新增页面无需先通过服务端进行菜单添加，遵循了前后端分离原则
export function generaMenu(routes, srvMenus) {
  for (let i = 0; i < routes.length; i++) {
    const routeItem = routes[i]
    var showItem = false
    for (let j = 0; j < srvMenus.length; j++) {
      const srvItem = srvMenus[j]

      // 前后端数据通过 srvName 属性来匹配
      if (routeItem.srvName !== undefined && routeItem.srvName === srvItem.srvName && srvItem.show === true) {
        showItem = true
        routes[i]['hidden'] = false
        break
      }
    }
    if (showItem === false) {
      routes[i]['hidden'] = true
    }

    if (routeItem['children'] !== undefined && routeItem['children'].length > 0) {
      generaMenu(routes[i]['children'], srvMenus)
    }
  }
}

const actions = {
  getMenus({
    commit
  }) {
    return new Promise((resolve, reject) => {
      getMenus(state.token).then(response => {
        if (response.code !== 100) {
          Message({
            message: response.message,
            type: 'error',
            duration: 5 * 1000
          })
          reject(response.message)
        }

        const {
          data
        } = response
        if (!data) {
          reject('Verification failed, please Login again.')
        }

        const srvMenus = data
        var pushRouter = asyncRoutes
        generaMenu(pushRouter, srvMenus)
        commit('SET_MENUS', pushRouter)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

第5步.修改路由钩子，渲染动态菜单

修改src/permission.js文件

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          const { roles } = await store.dispatch('user/getInfo')
          // 获取菜单
          await store.dispatch('menu/getMenus')
          // 生成动态路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          // 添加动态路由
          router.addRoutes(accessRoutes)

          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

关键代码：

// 在完成登录获取到用户信息后，开始从获取菜单
await store.dispatch('menu/getMenus')
// 生成动态路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 添加动态路由
router.addRoutes(accessRoutes)

改造完成，效果如下：