路由配置

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import baseRoutes from './routes/base'
import adminRoutes from './routes/admin'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...baseRoutes,
    ...adminRoutes
  ]
})

export default router

// src/router/routes/admin.js
export default [
  {
    path: '/admin',
    component: () => import('@/layouts/AdminLayout.vue'),
    meta: {
      requiresAuth: true,
      title: '管理后台'
    },
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/admin/Dashboard.vue'),
        meta: {
          title: '仪表盘',
          icon: 'dashboard'
        }
      },
      // 其他子路由...
    ]
  }
]

// src/router/guards.js
import { useUserStore } from '@/stores/user'
import { usePermissionStore } from '@/stores/permission'

export function setupRouterGuards(router) {
  router.beforeEach(async (to, from, next) => {
    const userStore = useUserStore()
    const permissionStore = usePermissionStore()

    // 检查是否需要登录
    if (to.meta.requiresAuth && !userStore.isLoggedIn) {
      next({ name: 'Login', query: { redirect: to.fullPath } })
      return
    }

    // 检查权限
    if (to.meta.permission) {
      if (!permissionStore.hasPermission(to.meta.permission)) {
        next({ name: '403' })
        return
      }
    }

    // 设置页面标题
    if (to.meta.title) {
      document.title = `${to.meta.title} - Zap Admin`
    }

    next()
  })
}

// src/stores/permission.js
import { defineStore } from 'pinia'
import { asyncRoutes } from '@/router/routes/async'

export const usePermissionStore = defineStore('permission', {
  state: () => ({
    routes: []
  }),
  actions: {
    async generateRoutes(roles) {
      // 过滤异步路由表
      const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      this.routes = accessedRoutes
      return 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
}

// src/utils/route.js
export function flattenRoutes(routes) {
  let flatRoutes = []
  routes.forEach(route => {
    if (route.children) {
      flatRoutes = flatRoutes.concat(flattenRoutes(route.children))
    } else {
      flatRoutes.push(route)
    }
  })
  return flatRoutes
}

export function findRouteByName(name, routes) {
  const flatRoutes = flattenRoutes(routes)
  return flatRoutes.find(route => route.name === name)
}