如何在Nuxt 3中为不同用户类型配置自定义路由？

你遇到的问题本质是router.options.ts在路由初始化阶段执行，此时Pinia还未挂载，无法直接获取用户状态。以下是两种可行的实现方案：

方案一：全局路由中间件（推荐） #

通过Nuxt路由中间件在导航阶段处理路由逻辑，此时Pinia已初始化，可正常获取用户状态。

1. 创建路由中间件 #

新建middleware/auth-route.ts文件：

export default defineNuxtRouteMiddleware((to) => {
  const { user } = useAuthStore()

  // 处理/products路由的动态跳转
  if (to.path === '/products') {
    switch (user.type) {
      case 'admin':
        return navigateTo('/admin/products')
      case 'client':
        return navigateTo('/client/products')
    }
  }

  // 处理/settings路由的权限与跳转
  if (to.path === '/settings') {
    if (user.type === 'admin') {
      return navigateTo('/admin/settings')
    } else {
      // 返回404错误
      return abortNavigation({ statusCode: 404, statusMessage: '页面不存在' })
    }
  }

  // 拦截非法访问专属路由
  if (to.path.startsWith('/admin/') && user.type !== 'admin') {
    return abortNavigation({ statusCode: 403, statusMessage: '无访问权限' })
  }
  if (to.path.startsWith('/client/') && user.type !== 'client') {
    return abortNavigation({ statusCode: 403, statusMessage: '无访问权限' })
  }
})

2. 注册全局中间件 #

在nuxt.config.ts中配置全局生效：

export default defineNuxtConfig({
  app: {
    middleware: ['auth-route']
  }
})

方案二：路由配置中添加beforeEnter守卫 #

直接在router.options.ts中为目标路由添加前置守卫，在导航阶段动态处理跳转：

// app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (existingRoutes) => {
    return [
      // 自定义/products路由规则
      {
        path: '/products',
        beforeEnter: () => {
          const { user } = useAuthStore()
          if (user.type === 'admin') return { path: '/admin/products' }
          if (user.type === 'client') return { path: '/client/products' }
        }
      },
      // 自定义/settings路由规则
      {
        path: '/settings',
        beforeEnter: () => {
          const { user } = useAuthStore()
          return user.type === 'admin' 
            ? { path: '/admin/settings' } 
            : { name: 'NotFound' }
        }
      },
      // 保留Nuxt自动生成的其他路由
      ...existingRoutes
    ]
  }
}

关键注意事项 #

• 确保用户状态已初始化：如果用户信息是从API或本地存储加载的，需在中间件中先等待状态加载完成（例如await useAuthStore().fetchUserInfo()），避免user为undefined。
• 404与权限拦截：根据业务需求调整错误提示与跳转逻辑，确保非授权用户无法访问专属路由。

内容的提问来源于stack exchange，提问作者Max Flex