fix(nuxt3): improve redirect lifecycle (#4430)

* fix(nuxt3): improve redirect lifecycle

* fix: check against existing cookie value in header

packages/nuxt3/src/app/composables/cookie.ts

@@ -32,13 +32,14 @@ export function useCookie <T=string> (name: string, _opts?: CookieOptions<T>): C
   if (process.client) {
     watch(cookie, () => { writeClientCookie(name, cookie.value, opts as CookieSerializeOptions) })
   } else if (process.server) {
-    const initialValue = cookie.value
     const nuxtApp = useNuxtApp()
-    nuxtApp.hooks.hookOnce('app:rendered', () => {
+    const writeFinalCookieValue = () => {
-      if (cookie.value !== initialValue) {
+      if (cookie.value !== cookies[name]) {
         writeServerCookie(useRequestEvent(nuxtApp), name, cookie.value, opts)
       }
-    })
+    }
+    nuxtApp.hooks.hookOnce('app:rendered', writeFinalCookieValue)
+    nuxtApp.hooks.hookOnce('app:redirected', writeFinalCookieValue)
   }
 
   return cookie as CookieRef<T>

packages/nuxt3/src/app/composables/router.ts

@@ -52,6 +52,7 @@ const isProcessingMiddleware = () => {
 
 export interface NavigateToOptions {
   replace?: boolean
+  redirectCode?: number
 }
 
 export const navigateTo = (to: RouteLocationRaw, options: NavigateToOptions = {}): Promise<void | NavigationFailure> | RouteLocationRaw => {
@@ -59,11 +60,11 @@ export const navigateTo = (to: RouteLocationRaw, options: NavigateToOptions = {}
     return to
   }
   const router = useRouter()
-  if (process.server && useNuxtApp().ssrContext) {
+  if (process.server) {
-    const { ssrContext } = useNuxtApp()
+    const nuxtApp = useNuxtApp()
-    if (ssrContext && ssrContext.event) {
+    if (nuxtApp.ssrContext && nuxtApp.ssrContext.event) {
       const redirectLocation = router.resolve(to).fullPath
-      return sendRedirect(ssrContext.event, redirectLocation)
+      return nuxtApp.callHook('app:redirected').then(() => sendRedirect(nuxtApp.ssrContext.event, redirectLocation, options.redirectCode || 301))
     }
   }
   // Client-side redirection using vue-router

packages/nuxt3/src/app/nuxt.ts

@@ -23,6 +23,7 @@ export interface RuntimeNuxtHooks {
   'app:beforeMount': (app: App<Element>) => HookResult
   'app:mounted': (app: App<Element>) => HookResult
   'app:rendered': () => HookResult
+  'app:redirected': () => HookResult
   'app:suspense:resolve': (Component?: VNode) => HookResult
   'app:error': (err: any) => HookResult
   'app:error:cleared': (options: { redirect?: string }) => HookResult

packages/nuxt3/src/app/plugins/router.ts

@@ -3,7 +3,7 @@ import { parseURL, parseQuery } from 'ufo'
 import { createError } from 'h3'
 import { defineNuxtPlugin } from '..'
 import { callWithNuxt } from '../nuxt'
-import { clearError, throwError } from '#app'
+import { clearError, navigateTo, throwError } from '#app'
 
 interface Route {
     /** Percentage encoded pathname section of the URL. */
@@ -221,9 +221,7 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>((nuxtApp) => {
     nuxtApp.hooks.hookOnce('app:created', async () => {
       await router.push(nuxtApp.ssrContext.url)
       if (route.fullPath !== nuxtApp.ssrContext.url) {
-        nuxtApp.ssrContext.res.setHeader('Location', route.fullPath)
+        await navigateTo(route.fullPath)
-        nuxtApp.ssrContext.res.statusCode = 301
-        nuxtApp.ssrContext.res.end()
       }
     })
   }

packages/nuxt3/src/pages/runtime/router.ts

@@ -9,7 +9,7 @@ import {
 import { createError } from 'h3'
 import { withoutBase } from 'ufo'
 import NuxtPage from './page'
-import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, throwError, clearError } from '#app'
+import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, throwError, clearError, navigateTo } from '#app'
 // @ts-ignore
 import routes from '#build/routes'
 // @ts-ignore
@@ -167,11 +167,9 @@ export default defineNuxtPlugin((nuxtApp) => {
     if (process.server) {
       router.push(nuxtApp.ssrContext.url)
 
-      router.afterEach((to) => {
+      router.afterEach(async (to) => {
         if (to.fullPath !== nuxtApp.ssrContext.url) {
-          nuxtApp.ssrContext.res.setHeader('Location', to.fullPath)
+          await navigateTo(to.fullPath)
-          nuxtApp.ssrContext.res.statusCode = 301
-          nuxtApp.ssrContext.res.end()
         }
       })
     }