search
LoginSignup
63

More than 1 year has passed since last update.

posted at

updated at

【Nuxt.js】 middleware is 何?

ミドルウェアとは

  • ミドルウェアを使用すると、ページがレンダリングされる前(SSR処理などが行われる前)に設定された関数を実行することができる
  • 認証許可が必要なページやログイン後のリダイレクトパスを保持するために使用される。
  • 関数はmiddleware/ディレクトリに入れる
    • middleware/auth.jsauthミドルウェアになる
  • ミドルウェアは第一引数に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自体の実行順序は、このようになっている。

    • pluginsmiddlewarefetchasyncData
  • middlewareの関数の呼び出し方の違いによる実行順序はこのようになる。

    • nuxt.config.jslayoutpage

Login画面では実行したくない問題

アカウント情報を確認してリダイレクトさせる処理をmiddleware内に書いた場合、Login画面ではまだアカウント情報がないので、関数を実行したくない場合がある。
その場合は、middleware内のcontextrouteがあるので、そこから関数を実行したくないページを弾いて処理を実行させるようにする。

middleware/auth.js
export default function ({ redirect, store, route }) {
  const user = store.state.user
  if(!user && route.path !== '/login') {
    redirect('/login')
  }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
63