Nuxt.jsのmiddlewareについて

フロントエンド弱者がNuxt.jsのmiddlewareをキャッチアップしたので記しておく。

middlewareディレクトリを作成

Nuxt.jsプロジェクトの配下にmiddlewareディレクトリを作成します。そして適用させたいjsファイルを作成します。

 middleware/
 　├ auth.js
 　└ routerOption.js

特定のページにmiddlewareを設置したいとき

pages/home.vue

export default {
      middleware: 'auth'
}

全てのページにmiddlewareを設置するとき

nuxt.config.js

export default {
  router: {
    middleware: 'routerOption'
  },
}

注意

jsの処理が非同期の場合なためmiddlewareを設置してログインしているユーザーでないと閲覧できないページが一瞬レンダリングされることがありました。(middlewareの処理よりも先にレンダリングが行われてしまうため)

解決方法

Promiseやasync、awaitなどを使って同期処理を行うようにしましょう。middlewareの処理がきちんと行われてからレンダリングされるようになります。

import firebase from 'firebase/app'
import 'firebase/auth'

export default async function ({ redirect }) {
      return new Promise((resolve) => {
            firebase.auth().onAuthStateChanged((user) => {
                  if (!user) {
                        return redirect("/")
                  } else {
                        resolve()
                  }
            });
      });
};

参考文献