vue3动态路由权限

//动态引入组件，直接写（）=》import('组件地址') 这样是不可行的
const modules = import.meta.glob([
  '@/views/*/*.vue',
  '@/views/*/*/*/*.vue',
  '@/views/*/*/*/*/*.vue',
  '@/layout/*.vue'
])

// 递归函数来生成路由，根据接口生成路由
function generateRoutes(routes: any[]): any {
  return routes.map((route) => {
    const path = route.path || ''
    const children = route.children || []
    const name = route.title
    const meta = {
      title: route.name,
      sort: route.sort
    }
    return {
      path,
      name,
      meta,
      component: modules[`/src/${route.component}`],
      children: children.length > 0 ? generateRoutes(children) : [],
      redirect: children.length > 0 ? generateRoutes(children)[0].path : ''
    }
  })
}
//判断是否加载过动态路由，可以放在store中
let registerRouteFresh = false

router.beforeEach(async (to, from, next) => {
  if (to.query.redirect && !useToken().getToken()) {
    useToken().setToken(to.query.ticket as string)
    await useUserInfoStore().queryUserInfo()
  }

  if (!useToken().getToken()) {
    //你的逻辑
  } else if (!registerRouteFresh) {
   //修改以后的权限，刷新网页及时生效、vue3只支持单个路由添加，只能循环去动态加载路由
    await menuStore.getMenus(useUserInfoStore().userInfo.role)
    await menuStore.getBtn(useUserInfoStore().userInfo.role)
    const menus = menuStore.menu
    if (menus !== null && menus.length > 0) {
      const asyncRoutes = generateRoutes(menus)
      asyncRoutes.forEach((item: any) => {
        router.addRoute(item)
        // @ts-ignore
        //这个是我左侧菜单需要循环二级路由添加的，vue3addRoute以后router.options.routes是没有动态更新的
        router.options.routes.push(item)
      })
    }
    registerRouteFresh = true
    next({ ...to, replace: true })
  } else {
    next()
  }
})

总结：vue3权限控制动态路由踩坑记录，重点全在这里了