ミドルウェアディレクトリ
middleware
ディレクトリには、アプリケーションミドルウェアが含まれています。ミドルウェアを使用すると、ページまたはページのグループ(レイアウト)をレンダリングする前に実行できる、カスタム関数を定義できます。
共有ミドルウェアは、middleware/
ディレクトリに配置する必要があります。ファイル名はミドルウェアの名前になります(middleware/auth.js
は auth
ミドルウェアになります)。関数を直接使用して、ページ固有のミドルウェアを定義することもできます。 匿名ミドルウェア を参照してください。
ミドルウェアは最初の引数としてコンテキスト を受け取ります。
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 を使用します。
import http from 'http'
export default function ({ route }) {
return http.post('http://my-stats-api.com', {
url: route.fullPath
})
}
次に、nuxt.config.js
で、router.middleware
キーを使用します。
export default {
router: {
middleware: 'stats'
}
}
これで、ルートが変更されるたびに stats
ミドルウェアが呼び出されます。
ミドルウェア(複数でも)を特定のレイアウト、またはページに追加することもできます。
export default {
middleware: ['auth', 'stats']
}
名前付きミドルウェア
middleware/
ディレクトリ内にファイルを作成することで、名前付きミドルウェアを作成できます。ファイル名はミドルウェア名になります。
export default function ({ store, redirect }) {
// ユーザーが認証されていない場合
if (!store.state.authenticated) {
return redirect('/login')
}
}
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware: 'authenticated'
}
</script>
匿名ミドルウェア
特定のページにのみミドルウェアを使用する必要がある場合は、そのミドルウェアの関数(または関数の配列)を直接使用できます:
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware({ store, redirect }) {
// ユーザーが認証されていない場合
if (!store.state.authenticated) {
return redirect('/login')
}
}
}
</script>
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)