按部就班VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

在我开发的不少系统里面，包括Winform混合框架、Bootstrap开发框架等系列产品中，我都倾向于动态配置菜单，并管理对应角色的菜单权限和页面权限，实现系统对用户权限的控制，菜单通常包括有名称、图标、顺序、URL链接等相关信息，对于VUE+Element 前端应用来讲，应该原理上差很少，本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理，实现动态菜单的维护和展现的处理。

一、菜单和路由的处理过程

因为Vue前端还须要引入路由这个概念，路由是咱们前端能够访问到的对应路径集合，路由定义了常规菜单说没有的不少复杂信息，可是每每这些是咱们不能随意修改的，所以咱们作法是以本地配置好的路由列表为基准，而菜单咱们采用在后盾配置方式，前端经过接口动态获取菜单列表，经过菜单的名称和路由名称的对应关系，咱们以菜单集合为对照，而后过滤本地全部静态路由的列表，而后得到用户能够访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不一样，而变化用户的菜单界面和可访问路由集合。

菜单路由处理的大概的操做过程以下所示

 

前端界面的动态菜单、本地路由、菜单导航和可访问路由的几个概念以下所示。

在前端界面处理中，咱们经过Element界面组件的方式展现动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

二、菜单和路由列表

根据前面的介绍，咱们定义了一些从服务端返回的动态菜单信息，这些菜单信息是一个JSON对象集合，以下界面所示。

[
  {
    id: '1',
    pid: '-1',
    text: '首页',
    icon: 'dashboard',
    name: 'dashboard'
  },
  {
    id: '2',
    pid: '-1',
    text: '产品列表',
    icon: 'table',
    name: 'product'
  },
  {
    id: '3',
    pid: '-1',
    text: '一级菜单',
    icon: 'example',
    children: [
      {
        id: '3-1',
        pid: '3',
        text: '二级菜单1',
        name: 'icon',
        icon: 'example'
      },
      {
        id: '3-2',
        pid: '3',
        text: '二级菜单2',
        icon: 'tree',
        children: [
          {
            id: '3-2-1',
            pid: '3-2',
            text: '三级菜单1',
            name: 'form',
            icon: 'form'
          },
          {
            id: '3-2-2',
            pid: '3-2',
            text: '三级菜单2',
            name: 'menu1-1',
            icon: 'form'
          },
          {
            id: '3-2-3',
            pid: '3-2',
            text: '三级菜单3',
            name: 'menu1-2',
            icon: 'form'
          },
          {
            id: '3-2-4',
            pid: '3-2',
            text: '三级菜单4',
            name: 'menu1-3',
            icon: 'form'
          }
        ]
      }
    ]
  },
  {
    id: '99',
    pid: '-1',
    text: '公司官网',
    icon: 'table',
    name: 'external-link'
  }
]

 菜单的JSON是根据角色进行动态获取的，不一样的角色对应不一样的菜单集合，而且菜单是一个多层次的树列表，能够定义无穷多级的展现，JSON格式化视图以下所示。

而Vue前端须要初始化定义前端页面的全部路由，这些包括路由页面的Layout等信息。

咱们能够在一个JS文件里面定义好对应前端全部的路由信息，以下所示

// 定义本系统的全部路由，具体路由呈现通过菜单数据过滤
export const asyncRoutes = {
  'dashboard': {
    path: '/dashboard',
    component: Layout,
    children: [{
      path: 'dashboard',
      name: 'dashboard',
      component: () => import('@/views/dashboard/index')
    }]
  },
  'product': {
    path: '/product',
    component: Layout,
    children: [{
      path: '/product',
      name: 'product',
      component: () => import('@/views/Product/index')
    }]
  },

  .............................. //省略部分

  'icon': {
    path: '/icon',
    component: Layout,
    children: [{
      path: '/icon',
      name: 'icon',
      component: () => import('@/views/icons/index')
    }]
  },

  'external-link': {
    path: 'http://www.iqidi.com',
    name: 'external-link'
  }
}

 这里的路由不须要嵌套，由于菜单展现才须要定义嵌套关系。

另外，因为系统在未登陆请求后端动态菜单前，咱们系统也须要正常运行起来，那么就须要预设一些基础的路由信息，如登陆界面、重定向页面、首页连接等这些路由信息，所以咱们能够分开两个路由对象，用来分开管理这些信息。

 

对路由的管理，一个须要默认建立路由的处理、重置路由的处理，以及动态设置新的路由处理，咱们封装几个函数来处理这些操做。

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

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

 

用户在通过登陆界面处理后，就会经过对应的Action获取动态路由信息（注意，这里是先获取动态菜单，而后过滤本地路由，即为动态路由信息），得到动态路由后，就设置前端所能访问的路由集合便可，以下代码所示。

 有了这些新的路由容许，前端系统的菜单才可以正常运转起来，不然即便界面展现了菜单，也不能访问特定的视图页面而跳到了404页面，由于路由没有。

三、登陆的过程处理

 前面大概介绍了路由的处理过程，其实咱们路由信息，应该须要从登陆界面开始讲起。

 以登陆界面为例，在用户登陆处理后，须要先验证用户的帐号密码，成功后继续请求该用户对应的动态菜单集合，并经过路由切换到对应的页面或者首页。

  在Store/Modules/user.js模块里面，定义了对应的登录处理Action，以下所示

 咱们这里忽略用户登陆的检验和处理token的过程，主要关注动态菜单请求并设置路由的过程。

在咱们须要拦截路由到达前的处理中，咱们定义对应的路由信息请求逻辑，以下所示。

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

 在处理菜单路由的对应模块里面，咱们定义了一个状态用来承载这些重要信息，以下定义State所示。

const state = {
  menuItems: [],
  routes: [],
  addRoutes: [],
  asyncRoutes: asyncRoutes
}

// 定义了路由和菜单的Mutation
const mutations = {
  SET_ROUTES: (state, routes) => {
    // var list = convertRoute(routes)
    routes.push({ path: '*', redirect: '/404', hidden: true }) // 此为默认错误路由

    state.addRoutes = routes
    state.routes = [].concat(routes)// constantRoutes.concat(routes)
  },
  SET_MENUS: (state, menus) => {
    state.menuItems = menus
  }
}

// 定义了生成动态路由的Action处理
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      getMenus().then(res => {
        const menus = res.data || [] // 统一经过接口获取菜单信息
        const routes = []

        menus.forEach(item => {
          filterRoutes(routes, item)
        })
        console.log(routes)// 打印路由

        commit('SET_ROUTES', routes)
        commit('SET_MENUS', menus)
        resolve(routes)
      });
    })
  }
}

最后返回对应的JS定义模块类信息便可。

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

在前端界面处理中，咱们经过Element界面组件的方式展现动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

咱们来看看界面生成的动态菜单效果。

  因为菜单动态展现和动态路由配合，所以既能在前端实现动态菜单的展现，又会根据菜单的集合刷新可访问路由，二者结合就能够顺利打开对应的视图页面了。

再来回顾一下，菜单路由处理的大概的操做过程以下所示