Nuxt3实现硬重定向并在服务端获取首页数据的方法

你当前在页面<script setup>里调用useAuth组合式中的navigateTo，本质是客户端软导航——浏览器不会向服务器重新请求首页，仅在客户端切换路由，因此首页的API数据只能在客户端获取。要实现服务端硬重定向，让首页走服务端渲染，有两种可行方案：

方案一：用Nuxt路由中间件处理认证重定向（推荐） #

Nuxt的路由中间件默认在服务端运行，可创建页面级中间件专门保护/action路由：

1. 创建认证中间件

// middleware/auth.js
export default defineNuxtRouteMiddleware(async (to) => {
  // 仅对操作页做认证校验
  if (to.path === '/action') {
    // 确保checkIfAuth能在服务端运行（比如读取Cookie、请求头Token）
    const isAuth = await checkIfAuth();
    
    if (!isAuth) {
      // 返回navigateTo会触发服务端302重定向
      return navigateTo('/', { redirectCode: 302 });
    }
  }
})

2. 在操作页启用中间件

// pages/action.vue
definePageMeta({
  middleware: 'auth'
})

<script setup>
// 无需再手动调用useAuth
</script>

这种方式下，未认证用户访问/action时，服务器直接返回302重定向指令，浏览器会重新请求首页，Nuxt会在服务端渲染首页并执行服务端数据逻辑，首页的API数据自然从服务端获取。

方案二：在页面服务端生命周期内处理重定向 #

如果不想用中间件，可以在操作页的服务端环境中直接处理重定向：

// pages/action.vue
<script setup>
// 仅在服务端执行认证校验
if (process.server) {
  const isAuth = await checkIfAuth();
  
  if (!isAuth) {
    // 服务端触发硬重定向
    await navigateTo('/', { redirectCode: 302 });
  }
}
</script>

关键注意点 #

无论采用哪种方案，checkIfAuth必须支持服务端运行：

• 避免使用localStorage、window等客户端专属API
• 改为读取服务端可获取的认证信息，比如请求头Token、Cookie等

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