（2）vue-element-admin使用：动态路由

最新推荐文章于 2024-08-21 09:21:50 发布

人间无数_ljy

最新推荐文章于 2024-08-21 09:21:50 发布

阅读量1.4k

点赞数

分类专栏： vue-element-admin 文章标签： vue

本文链接：https://blog.csdn.net/qq_42499670/article/details/119541413

版权

vue-element-admin 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

vue-element-admin的登录退出，可以看上一篇。后端代码不做讲解，会说明需要返回的数据格式。

本篇章参考：https://ke.qq.com/course/3323814?taid=10963075825055654

想要源码的可以联系视频里的老师或者加我qq814216044。

主要修改文件为src/store/modules/permission.js把其中的generateRoutes方法改为如下所示

const actions = {
  generateRoutes: async function({ commit }, roles) {
    // 从后台请求所有的路由信息
    const res = await getRoutes()
    // 定义一个变量，用来存放可以访问的路由表
    const dbAsyncRoutes = res.data
    // 过滤掉空的children和把component字符改编为对象
    const myAsyncRoutes = dbAsyncRoutes.filter(curr => {
      if (curr.children == null || curr.children.length === 0) {
        delete curr.children
      }
      return replaceComponent(curr)
    })

    let accessedRoutes
    // 判断当前的角色列表中，是否有包含admin
    if (roles.includes('admin')) {
      // 所有路由都可以被访问，将ansyncRoutes改造成从数据库中获取
      accessedRoutes = myAsyncRoutes || []
    } else {
      // 根据角色，过滤掉不能访问的路由表
      accessedRoutes = filterAsyncRoutes(myAsyncRoutes, roles)
    }
    // commit
    commit('SET_ROUTES', accessedRoutes)
    // 成功返回
    // resolve(accessedRoutes)
    return accessedRoutes
  }
}

由于方法中replaceComponent方法是新增，方法如下所部，并附上修改有import需要导入的文件。

import { constantRoutes, componentMap } from '@/router'
import { getRoutes } from '@/api/auth'

// 替换route对象中的component
function replaceComponent(comp) {
  if (comp.component && typeof (comp.component) === 'string') {
    comp.component = componentMap[comp.component]
  }

  if (comp.children && comp.children.length > 0) {
    for (let i = 0; i < comp.children.length; i++) {
      comp.children[i] = replaceComponent(comp.children[i])
    }
  }
  return comp
}

到此src/store/modules/permission.js已经修改完，由于后端代码已经是确定的，也就是说登录后会返回一个我们已经写好的路由页面，所以我们要复制已经写好的页面过来。如下图所示

没有的文件就复制过去，已经有的文件就把所有内容复制粘贴。在上面的方法中有一个componentMap值，他是在router/index.vue中配置的如下所示

源代码：

/**
 * 定义组件名称和组件对象的map对象
*/
export const componentMap = {
  'layout': require('@/layout').default,
  'redirect_index': () => import('@/views/redirect/index').then(m => m.default),
  'login_index': () => import('@/views/login/index').then(m => m.default),
  'login_auth_redirect': () => import('@/views/login/auth-redirect').then(m => m.default),
  'error_page_404': () => import('@/views/error-page/404').then(m => m.default),
  'error_page_401': () => import('@/views/error-page/401').then(m => m.default),
  'dashboard_index': () => import('@/views/dashboard/index').then(m => m.default),
  'documentation_index': () => import('@/views/documentation/index').then(m => m.default),
  'guide_index': () => import('@/views/guide/index').then(m => m.default),
  'profile_index': () => import('@/views/profile/index').then(m => m.default),
  'permission_menu': () => import('@/views/permission/menu').then(m => m.default),
  'permission_resource': () => import('@/views/permission/permResource').then(m => m.default),
  'permission_role': () => import('@/views/permission/role').then(m => m.default),
  'user_role': () => import('@/views/permission/user').then(m => m.default),
  'icons_index': () => import('@/views/icons/index').then(m => m.default),
  'clipboard_index': () => import('@/views/clipboard/index').then(m => m.default)
}

此时动态路由配置成功，登录后显示如下