Zenn
😃

【Nuxt.js】 middleware is 何？

2020/09/17に公開
JavaScript
Nuxt
Vue.js
#
middleware
tech

ミドルウェアとは

  • ミドルウェアを使用すると、ページがレンダリングされる前(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