😃
【Nuxt.js】 middleware is 何?
ミドルウェアとは
- ミドルウェアを使用すると、ページがレンダリングされる前(SSR処理などが行われる前)に設定された関数を実行することができる
- 認証許可が必要なページやログイン後のリダイレクトパスを保持するために使用される。
- 関数は
middleware/
ディレクトリに入れる-
middleware/auth.js
はauth
ミドルウェアになる
-
- ミドルウェアは第一引数に
context
を取る-
context
の内容についてはこちらを参照
-
- ユニバーサルモードの場合は、サーバーサイドで一度だけ呼び出される。 (Nuxtアプリケーションへの最初のリクエスト時、またはページの再読み込み時)クライアントサイドでは、他のルートへ移動した時に呼び出される。
- SPAモードの場合、クライアントサイドでの最初のリクエスト時と他のルートへ移動した時に呼び出される。
middlewareを使用した処理の例
storeのアカウント情報が無い場合、ログイン画面にリダイレクトされる処理を書いてみる。
middleware/redirect.js
export default function ({ redirect, store }) {
const user = store.state.user
if(!user) {
redirect('/login')
}
}
これをnuxt.config.js
で読み込む。
nuxt.config.js
export default {
router {
middleware: 'redirect'
}
}
このようにすると全てのルート変更時にredirect.js
が読み込まれるようになる。
また、特定のページ(またはレイアウト)にのみ特定の関数を設定することもできる。
index.vue
<script>
import { fetchUid } from '@/middleware/uid.js'
export default {
middleware: [ 'auth', fetchUid ]
}
</script>
1ファイルに1つの処理の場合は、'auth'で関数を実行することができる。
一方、1つのファイルに複数の関数がある場合は、ファイルをimportすることで特定の関数を実行することができる。
middlewareの実行順序について
-
middleware
自体の実行順序は、このようになっている。-
plugins
→middleware
→fetch
→asyncData
-
-
middleware
の関数の呼び出し方の違いによる実行順序はこのようになる。-
nuxt.config.js
→layout
→page
-
Login画面では実行したくない問題
アカウント情報を確認してリダイレクトさせる処理をmiddleware
内に書いた場合、Login画面ではまだアカウント情報がないので、関数を実行したくない場合がある。
その場合は、middleware
内のcontext
にroute
があるので、そこから関数を実行したくないページを弾いて処理を実行させるようにする。
middleware/auth.js
export default function ({ redirect, store, route }) {
const user = store.state.user
if(!user && route.path !== '/login') {
redirect('/login')
}
}
Discussion