循序渐进VUE+Element 前端应用开发(3)— 动态菜单和路由的关联处理

在我开发的许多系统内里,包罗Winform夹杂框架、Bootstrap开发框架等系列产物中,我都倾向于动态设置菜单,并治理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一样平常包罗有名称、图标、顺序、URL毗邻等相关信息,对于VUE+Element 前端应用来说,应该原理上差不多,本篇随笔先容连系服务端的动态菜单设置和内陆路由的关联处置,实现动态菜单的维护和展示的处置。

1、菜单和路由的处置历程

由于Vue前端还需要引入路由这个观点,路由是我们前端可以接见到的对应路径聚集,路由界说了通例菜单说没有的许多庞大信息,然则往往这些是我们不能随意修改的,因此我们做法是以内陆设置好的路由列表为基准,而菜单我们接纳在后援设置方式,前端通过接口动态获取菜单列表,通过菜单的名称和路由名称的对应关系,我们以菜单聚集为对照,然后过滤内陆所有静态路由的列表,然后获得用户可以接见的路由列表,设置动态路由给前端,从而实现了界面凭据用户角色/权限的差别,而转变用户的菜单界面和可接见路由聚集。

菜单路由处置的也许的操作历程如下所示

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

 

前端界面的动态菜单、内陆路由、菜单导航和可接见路由的几个观点如下所示。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

在前端界面处置中,我们通过Element界面组件的方式展示动态菜单信息,并连系菜单和路由的关系,实现菜单跳转到对应视图的处置历程。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

2、菜单和路由列表

凭据前面的先容,我们界说了一些从服务端返回的动态菜单信息,这些菜单信息是一个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+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

而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'
  }
}

 这里的路由不需要嵌套,由于菜单展示才需要界说嵌套关系。

另外,由于系统在未登录请求后端动态菜单前,我们系统也需要正常运行起来,那么就需要预设一些基础的路由信息,如登录界面、重定向页面、首页链接等这些路由信息,因此我们可以离开两个路由工具,用来离开治理这些信息。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

 

对路由的治理,一个需要默认建立路由的处置、重置路由的处置,以及动态设置新的路由处置,我们封装几个函数来处置这些操作。

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
}

 

害你加班的bug就是我写的,记一次升级Jenkins插件引发的加班

用户在经由登录界面处置后,就会通过对应的Action获取动态路由信息(注重,这里是先获取动态菜单,然后过滤内陆路由,即为动态路由信息),获得动态路由后,就设置前端所能接见的路由聚集即可,如下代码所示。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

 有了这些新的路由允许,前端系统的菜单才能够正常运转起来,否则纵然界面展示了菜单,也不能接见特定的视图页面而跳到了404页面,由于路由没有。

3、登录的历程处置

 前面也许先容了路由的处置历程,实在我们路由信息,应该需要从登录界面最先讲起。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

 以登录界面为例,在用户登录处置后,需要先验证用户的账号密码,乐成后继续请求该用户对应的动态菜单聚集,并通过路由切换到对应的页面或者首页。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

  在Store/Modules/user.js模块内里,界说了对应的上岸处置Action,如下所示

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

 我们这里忽略用户登录的磨练和处置token的历程,主要关注动态菜单请求并设置路由的历程。

在我们需要阻挡路由到达前的处置中,我们界说对应的路由信息请求逻辑,如下所示。

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

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

 在处置菜单路由的对应模块内里,我们界说了一个状态用来承载这些主要信息,如下界说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界面组件的方式展示动态菜单信息,并连系菜单和路由的关系,实现菜单跳转到对应视图的处置历程。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

我们来看看界面天生的动态菜单效果。

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

  由于菜单动态展示和动态路由配合,因此既能在前端实现动态菜单的展示,又会凭据菜单的聚集刷新可接见路由,两者连系就可以顺遂打开对应的视图页面了。

再来回首一下,菜单路由处置的也许的操作历程如下所示

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

原创文章,作者:28qn新闻网,如若转载,请注明出处:https://www.28qn.com/archives/12280.html