Nuxt.jsでmiddlewareを使ってログインしていないユーザーをリダイレクトする方法

2021年7月19日Vue.js

Nuxt.jsでmiddlewareを使ってログインしていないユーザーをリダイレクトする方法を紹介します。

middlewareを使ってログインしていないユーザーをリダイレクトする手順

1. ログイン機能を作る
2. store/index.jsの認証状態を確認するgettersを定義する
3. middlewareフォルダにauth.jsを作成する
4. pagesにmiddleware/auth.jsをセットする

ログイン機能を作る

Nuxt.jsでFirebase REST APIを使ったサインアップ・ログイン機能の作り方を参考にしてみてください。

store/index.jsの認証状態を確認するgettersを定義する

    state: {
      token: null, //ユーザー認証
    },

stateにtokenを保持しており、そこにFirebaseの認証のためのIDトークンが格納されるとします。

その状態であれば、gettersは次のように記述します。

    getters: {
      // 認証の確認
      isAuthenticated(state) {
        // tokenがnullでないなら認証されているということ
        return state.token != null
      }
    }

tokenがnullでなければtrue、nullならfalseが返されます。
nullでないならIDトークンがあるということなので、認証されていることがわかります。

middlewareフォルダにauth.jsを作成する

export default function (context) {
  // 認証されていないユーザーの場合、リダイレクト
  if (!context.store.getters.isAuthenticated) {
    context.redirect('/admin/signup')
  }
}

gettersには、contextのstoreからアクセスできます。
認証されていないユーザーの場合、ログインページなどリダイレクトしたいページに飛ばします。

pagesにmiddleware/auth.jsをセットする

pagesで認証されている状態が必要なvueファイルのscriptに以下を記述します。

  middleware: 'auth',

これで認証されて