vue 路由权限控制-beforeEach-返回权限列表动态添加路由

公共路由

import { createRouter, createWebHashHistory } from 'vue-router'

const publicRoutes = [
  {
    path: '/',
    redirect: { path: '/login' }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home'),
    redirect: '/welcome',
    children: [
      {
        path: '/:pathMatch(.*)*',    // 捕获所有路由或 404 Not found 路由
        component: () => import('../views/welcome')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: publicRoutes
})

export default router

后端返回的路由列表

navigationList : [
     {
        id: 1,
        icon: 'icon-jurassic_user',
        name: '用户管理',
        url: '/user'
    },
     {
        id: 2,
        icon: 'icon-jurassic_user',
        name: '角色管理',
        url: '/role'
     },
     {
        id: 3,
        icon: 'icon-shebei',
        name: '设备管理',
        url: '/device'
      }
]

动态添加路由

• router.addRoute() //应用程序已经运行的时候添加路由
• router.removeRoute() // 应用程序已经运行的时候删除路由

import store from '@/store'
//这里我用vuex的一个变量 asyncRoutestMark 来标识是否拼接过路由
router.beforeEach((to, from, next) => {
    if (!store.state.asyncRoutestMark) {
        // navigationList 是上面模拟接口返回的数据
        // 这里将新的路由都作为 home 的子路由(实际开发根据情况)
        // meta 是存储一些信息，可以用于权限校验或其他
        navigationList.forEach( navigation => {
          router.addRoute('home', {
            path: navigation.url,
            meta: { name: navigation.name, isAsync: true, icon: navigation.icon },
            name: menu.url,
            component: () => import(`../views/${menu.url}`)
          })
        })
        console.log(router.getRoutes(), '查看现有路由')
        store.commit('setAsyncRoutestMark', true) // 添加路由后更改标识为true
        next({ ...to, replace: true })     //路由进行重定向放行
    } else {
      next()
    }
})