ミドルウェアディレクトリ

middleware ディレクトリには、アプリケーションミドルウェアが含まれています。ミドルウェアを使用すると、ページまたはページのグループ（レイアウト）をレンダリングする前に実行できる、カスタム関数を定義できます。

共有ミドルウェアは、middleware/ ディレクトリに配置する必要があります。ファイル名はミドルウェアの名前になります（middleware/auth.js は auth ミドルウェアになります）。関数を直接使用して、ページ固有のミドルウェアを定義することもできます。匿名ミドルウェアを参照してください。

ミドルウェアは最初の引数としてコンテキストを受け取ります。

middleware/user-agent.js

export default function (context) {
  // userAgentプロパティをコンテキストに追加します
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

ユニバーサルモードでは、ミドルウェアはサーバ側（Nuxt アプリへの最初のリクエスト時、たとえばアプリに直接アクセスするときやページを更新するとき）で一度呼び出され、クライアント側でさらにルートに移動するときに呼び出されます。ssr：false を使用すると、どちらの状況でもクライアント側でミドルウェアが呼び出されます。

ミドルウェアは以下の順序で連続して実行されます：

nuxt.config.js（ファイル内の順序）
マッチしたレイアウト
マッチしたページ

ルーターミドルウェア

ミドルウェアは非同期にすることができます。これを行うには Promise を返すか、async/await を使用します。

middleware/stats.js

import http from 'http'

export default function ({ route }) {
  return http.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

次に、nuxt.config.js で、router.middleware キーを使用します。

nuxt.config.js

export default {
  router: {
    middleware: 'stats'
  }
}

これで、ルートが変更されるたびに stats ミドルウェアが呼び出されます。

ミドルウェア（複数でも）を特定のレイアウト、またはページに追加することもできます。

pages/index.vue / layouts/default.vue

export default {
  middleware: ['auth', 'stats']
}

名前付きミドルウェア

middleware/ ディレクトリ内にファイルを作成することで、名前付きミドルウェアを作成できます。ファイル名はミドルウェア名になります。

middleware/authenticated.js

export default function ({ store, redirect }) {
  // ユーザーが認証されていない場合
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

pages/secret.vue

<template>
  <h1>Secret page</h1>
</template>

<script>
  export default {
    middleware: 'authenticated'
  }
</script>

匿名ミドルウェア

特定のページにのみミドルウェアを使用する必要がある場合は、そのミドルウェアの関数（または関数の配列）を直接使用できます：

pages/secret.vue

<template>
  <h1>Secret page</h1>
</template>

<script>
  export default {
    middleware({ store, redirect }) {
      // ユーザーが認証されていない場合
      if (!store.state.authenticated) {
        return redirect('/login')
      }
    }
  }
</script>