Vue-Admin-Element 中的动态加载路由实现

在现代的前端开发中，动态加载路由是一个非常重要的功能。特别是在管理后台系统中，不同的用户可能拥有不同的权限，因此需要根据用户的权限动态加载不同的路由。Vue-Admin-Element 是一个基于 Vue.js 和 Element UI 的后台管理系统模板，它提供了丰富的功能和组件，其中就包括动态加载路由的实现。

本文将详细介绍如何在 Vue-Admin-Element 中实现动态加载路由，包括路由的配置、权限控制、以及如何根据用户的权限动态生成路由。

1. 路由配置

在 Vue-Admin-Element 中，路由的配置通常放在 src/router/index.js 文件中。我们可以将路由分为两种类型：静态路由和动态路由。

1.1 静态路由

静态路由是指在应用启动时就加载的路由，这些路由通常是不需要权限控制的，比如登录页、404 页面等。

const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  }
]

1.2 动态路由

动态路由是指根据用户的权限动态加载的路由。这些路由通常需要根据用户的角色或权限来决定是否加载。

const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor']
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: { title: 'Page Permission', roles: ['admin'] }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: { title: 'Directive Permission' }
      }
    ]
  }
]

2. 权限控制

在 Vue-Admin-Element 中，权限控制通常通过 vuex 来管理。我们可以通过 vuex 来存储用户的角色和权限信息，并根据这些信息来动态生成路由。

2.1 用户登录

当用户登录时，我们可以通过接口获取用户的角色和权限信息，并将其存储在 vuex 中。

// src/store/modules/user.js
const state = {
  roles: []
}

const mutations = {
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}

const actions = {
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        const { data } = response
        commit('SET_ROLES', data.roles)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

2.2 动态生成路由

在用户登录成功后，我们可以根据用户的角色和权限信息动态生成路由。

// src/permission.js
router.beforeEach(async(to, from, next) => {
  const hasRoles = store.getters.roles && store.getters.roles.length > 0
  if (hasRoles) {
    next()
  } else {
    try {
      const { roles } = await store.dispatch('user/getInfo')
      const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
      router.addRoutes(accessRoutes)
      next({ ...to, replace: true })
    } catch (error) {
      next(`/login?redirect=${to.path}`)
    }
  }
})

2.3 生成路由

在 vuex 中，我们可以通过 generateRoutes 方法来根据用户的角色生成路由。

// src/store/modules/permission.js
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

3. 路由加载

在动态生成路由后，我们需要将这些路由添加到 vue-router 中。Vue-Admin-Element 使用了 router.addRoutes 方法来动态添加路由。

// src/permission.js
router.beforeEach(async(to, from, next) => {
  const hasRoles = store.getters.roles && store.getters.roles.length > 0
  if (hasRoles) {
    next()
  } else {
    try {
      const { roles } = await store.dispatch('user/getInfo')
      const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
      router.addRoutes(accessRoutes)
      next({ ...to, replace: true })
    } catch (error) {
      next(`/login?redirect=${to.path}`)
    }
  }
})

4. 总结

通过以上步骤，我们可以在 Vue-Admin-Element 中实现动态加载路由的功能。首先，我们将路由分为静态路由和动态路由，静态路由在应用启动时加载，而动态路由则根据用户的权限动态生成。然后，我们通过 vuex 来管理用户的角色和权限信息，并根据这些信息动态生成路由。最后，我们使用 router.addRoutes 方法将生成的路由添加到 vue-router 中。

动态加载路由不仅可以提高应用的性能，还可以根据用户的权限灵活地控制路由的访问权限，从而提高系统的安全性。希望本文能帮助你更好地理解和使用 Vue-Admin-Element 中的动态加载路由功能。