Nuxtは、アプリケーション全体で使用できるカスタマイズ可能なルートミドルウェアフレームワークを提供しており、特定のルートに移動する前に実行したいコードを抽出するのに理想的です。

ルートミドルウェアには3種類あります：

1. 匿名（またはインライン）ルートミドルウェアはページ内で直接定義されます。
2. 名前付きルートミドルウェアは app/middleware/ に配置され、ページで使用されると非同期インポートを介して自動的にロードされます。
3. グローバルルートミドルウェアは app/middleware/ に .global サフィックスを付けて配置され、すべてのルート変更時に実行されます。

最初の2種類のルートミドルウェアは definePageMeta で定義できます。

使用法

ルートミドルウェアは、現在のルートと次のルートを引数として受け取るナビゲーションガードです。

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  // 実際のアプリではすべてのルートを `/` にリダイレクトすることはおそらくありませんが、
  // リダイレクトする前に `to.path` を確認することが重要です。
  // そうしないと無限リダイレクトループに陥る可能性があります。
  if (to.path !== '/') {
    return navigateTo('/')
  }
})

Nuxtは、ミドルウェアから直接返すことができる2つのグローバルに利用可能なヘルパーを提供します。

1. navigateTo - 指定されたルートにリダイレクトします
2. abortNavigation - ナビゲーションを中止し、オプションでエラーメッセージを表示します。

vue-router のナビゲーションガードとは異なり、3番目の next() 引数は渡されず、リダイレクトやルートのキャンセルはミドルウェアから値を返すことで処理されます。

返すことができる値は次のとおりです：

• 何も返さない（単純な return または何も返さない） - ナビゲーションをブロックせず、次のミドルウェア関数に移動するか、ルートナビゲーションを完了します
• return navigateTo('/') - 指定されたパスにリダイレクトし、サーバーサイドでリダイレクトが発生した場合はリダイレクトコードを 302 Found に設定します
• return navigateTo('/', { redirectCode: 301 }) - 指定されたパスにリダイレクトし、サーバーサイドでリダイレクトが発生した場合はリダイレクトコードを 301 Moved Permanently に設定します
• return abortNavigation() - 現在のナビゲーションを停止します
• return abortNavigation(error) - エラーで現在のナビゲーションを拒否します

ミドルウェアの順序

ミドルウェアは次の順序で実行されます：

1. グローバルミドルウェア
2. ページで定義されたミドルウェアの順序（配列構文で複数のミドルウェアが宣言されている場合）

例えば、次のようなミドルウェアとコンポーネントがあるとします：

-| middleware/
---| analytics.global.ts
---| setup.global.ts
---| auth.ts

definePageMeta({
  middleware: [
    function (to, from) {
      // カスタムインラインミドルウェア
    },
    'auth',
  ],
});

ミドルウェアは次の順序で実行されることが期待されます：

1. analytics.global.ts
2. setup.global.ts
3. カスタムインラインミドルウェア
4. auth.ts

グローバルミドルウェアの順序付け

デフォルトでは、グローバルミドルウェアはファイル名に基づいてアルファベット順に実行されます。

しかし、特定の順序を定義したい場合があります。例えば、前述のシナリオでは、setup.global.ts が analytics.global.ts の前に実行される必要があるかもしれません。その場合、グローバルミドルウェアに「アルファベット」番号を付けることをお勧めします。

-| middleware/
---| 01.setup.global.ts
---| 02.analytics.global.ts
---| auth.ts

ミドルウェアが実行されるとき

サイトがサーバーレンダリングまたは生成されている場合、初期ページのミドルウェアはページがレンダリングされるときとクライアントで再度実行されます。これは、ミドルウェアがブラウザ環境を必要とする場合、例えば生成されたサイトがある場合、レスポンスを積極的にキャッシュする場合、またはローカルストレージから値を読み取りたい場合に必要かもしれません。

しかし、この動作を避けたい場合は次のようにできます：

export default defineNuxtRouteMiddleware(to => {
  // サーバーでミドルウェアをスキップ
  if (import.meta.server) return
  // クライアント側で完全にミドルウェアをスキップ
  if (import.meta.client) return
  // または初期クライアントロード時のみミドルウェアをスキップ
  const nuxtApp = useNuxtApp()
  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
})

これは、サーバー上でミドルウェアでエラーをスローし、エラーページがレンダリングされる場合でも当てはまります。ミドルウェアはブラウザで再度実行されます。

ミドルウェアでのルートへのアクセス

常にミドルウェアで to と from パラメータを使用して次のルートと前のルートにアクセスしてください。このコンテキストで useRoute() コンポーザブルを使用することは避けてください。 ミドルウェアには**「現在のルート」という概念はありません**。ミドルウェアはナビゲーションを中止したり、別のルートにリダイレクトしたりすることができるためです。このコンテキストでは useRoute() コンポーザブルは常に不正確になります。

// @errors: 2304
export default defineNuxtRouteMiddleware(to => {
  // ミドルウェアで `useRoute()` を呼び出さないようにルートを関数に渡す
  doSomethingWithRoute(to)
    
  // ❌ これは警告を出力し、推奨されません
  callsRouteInternally()
})

ミドルウェアの動的追加

グローバルまたは名前付きルートミドルウェアを、プラグイン内などで addRouteMiddleware() ヘルパー関数を使用して手動で追加することが可能です。

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-test', () => {
    console.log('このグローバルミドルウェアはプラグインで追加され、すべてのルート変更時に実行されます')
  }, { global: true })

  addRouteMiddleware('named-test', () => {
    console.log('この名前付きミドルウェアはプラグインで追加され、同じ名前の既存のミドルウェアを上書きします')
  })
})

例

-| middleware/
---| auth.ts

ページファイル内で、このルートミドルウェアを参照できます：

definePageMeta({
  middleware: ["auth"]
  // または middleware: 'auth'
})

これで、そのページへのナビゲーションが完了する前に、auth ルートミドルウェアが実行されます。

ビルド時にミドルウェアを設定する

各ページで definePageMeta を使用する代わりに、pages:extend フック内で名前付きルートミドルウェアを追加できます。

import type { NuxtPage } from 'nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      function setMiddleware (pages: NuxtPage[]) {
        for (const page of pages) {
          if (/* some condition */ true) {
            page.meta ||= {}
            // これはページ内の `definePageMeta` で設定されたミドルウェアを上書きすることに注意してください
            page.meta.middleware = ['named']
          }
          if (page.children) {
            setMiddleware(page.children)
          }
        }
      }
      setMiddleware(pages)
    }
  }
})