vue实现前端控制动态路由的示例代码

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: allRoutes
})

// 所有路由定义（静态+动态）
const allRoutes = [
  // 基础路由
  {
    path: '/',
    name: 'login',
    component: () => import("@/views/LoginView.vue")
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/Error/404View.vue')
  },
  // 动态路由容器（登录后内容）
  {
    path: '/layout',
    name: 'layout',
    component: () => import('@/Layout/MainLayout.vue'),
    children: [] // 初始为空，动态注入路由
  },
]

// 需要权限控制的路由配置（扁平化结构更易管理）
const dynamicRouteConfigs = [
  {
    path: '/home', // 注意使用相对路径
    name: 'home',
    component: () => import('@/views/HomeView.vue'),
    meta: { 
      title: '首页', 
      icon: 'House',
      roles: ['*'] // *表示所有登录用户
    }
  },
  {
    path: 'user/list',
    name: 'UserList',
    component: () => import('@/views/user/ListView.vue'),
    meta: { 
      title: '用户列表',
      roles: ['1','2']
    }
  },
  {
    path: 'user/role',
    name: 'UserRole',
    component: () => import('@/views/user/RoleView.vue'),
    meta: { 
      title: '角色管理',
      roles: ['1']
    }
  }
]

// 权限过滤方法修正
const filterRoutes = (routes, roles) => {
  // 递归处理每个路由节点
  return routes.filter(route => {
    // 获取当前路由需要的权限角色
    const requiredRoles = route.meta?.roles || []
    // 检查当前路由是否满足权限要求
    const hasPermission = requiredRoles.includes('*') || requiredRoles.includes(roles + '')
    // 递归处理子路由（关键修改点）
    if (route.children) {
      const filteredChildren = filterRoutes(route.children, roles)
      // 保留有效子路由：只有当子路由存在时才保留children
      route.children = filteredChildren.length ? filteredChildren : undefined
    }
    /* 
      路由保留条件（核心逻辑）：
      1. 当前路由自身有权限 或 
      2. 存在有效的子路由（即使当前路由没有权限，但子路由有权限时保留父级容器）
    */
    return hasPermission || (route.children && route.children.length > 0)
  })
}

// 动态添加路由到layout
const addDynamicRoutes = (roles) => {
  // 清空已有动态路由
  const layout = router.getRoutes().find(r => r.name === 'layout')
  layout.children.forEach(child => {
    router.removeRoute(child.name)
  })
  // 过滤并添加新路由
  const allowedRoutes = filterRoutes(dynamicRouteConfigs, loginStore().roles); 
  allowedRoutes.forEach(route => { router.addRoute('layout', route); });
  console.log(allowedRoutes);
  sessionStorage.setItem('menuPath',JSON.stringify(allowedRoutes));//存储的筛选过的动态路由
  sessionStorage.setItem('menuName',JSON.stringify(router.getRoutes()));//存储的所有动态路由
  console.log(router.getRoutes());
  // 确保404最后处理
  router.addRoute({ 
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  })
}

// 路由守卫修改部分（router/index.ts）
router.beforeEach(async (to, from, next) => {
  const store = loginStore()
  const isLogin = !!store.id
  // 未登录状态处理
  if (!isLogin) {
    return to.path === '/' ? next() : next('/')
  }
  // 已登录但访问登录页时重定向
  if (to.path === '/') {
    return next('/home')
  }
  // 动态路由加载逻辑
  if (!store.routesLoaded) {
    try {
      // 直接从store获取已保存的角色信息
      const userRoles = store.roles
      console.log(userRoles);
      // 如果角色信息不存在则抛出错误
      if (!userRoles || userRoles.length === 0) {
        throw new Error('用户角色信息未获取')
      }
      // 添加动态路由
      addDynamicRoutes(userRoles)
      // 在添加路由后打印
      console.log('当前所有路由:', router.getRoutes().map(r => r.path))
      // 更新加载状态
      store.setRoutesLoaded(true)
      // 使用replace方式跳转避免重复记录历史
      return next({ ...to, replace: true })
    } catch (error) {
      console.error('路由加载失败:', error)
      // 清除用户状态并跳转登录页
      store.$reset()
      return next('/')
    }
  }
  next()
})