Firebase Authenticationでログインした後のリダイレクト処理の仕方が分かりません

Question

Nuxt.jsとFirebase Authenticationを使ってログイン処理を実装しております。

実現したいことは以下の通りです。

• https://sample.comでログインボタンを押してログイン
• ログイン完了後https://sample.com/mypage/dashboardにリダイレクト
• ログイン中ならhttps://sample.com/mypage/◯◯というmypage以降の階層を自由に行き来できる
• ログイン中にmypageが含まれないURLにアクセスしたらhttps://sample.com/mypage/dashboardにリダイレクト
• ログインしていない状態でmypageが含まれるURLにアクセスしたらhttps://sample.comにリダイレクト

そこでmiddlewareに以下のように作成したのですが、これだとログイン後にhttps://sample.com/mypage/◯◯にアクセスするとhttps://sample.com/mypage/dashboardにリダイレクトされてしまいます。
未ログイン時はmypageに行った際ちゃんとトップページにリダイレクトされます。

// middleware/authenticated.js

import { db, auth } from '~/plugins/firebase'

export default function({ route, store, redirect }) {
  // ログイン時
  auth.onAuthStateChanged((user) => {
    if (user) {
      store.commit('setUserName', user.displayName)

      db.collection('users')
        .doc(user.uid)
        .get()
        .then((doc) => {
          // もし初回ログインでなければVuexにデータをセットしリダイレクト
          if (doc.exists) {
            store.commit('setUser', doc.data())
            store.commit('setUid', user.uid)
            redirect('/mypage/dashboard')
          } else {
           // 初回ログインであればCloud Firestoreにドキュメントを作成してリダイレクト
            const defaultValue = {
              onamae: user.displayName,
              prefecture: '未設定'
            }
            db.collection('users')
              .doc(user.uid)
              .set(defaultValue)
              .then(() => {
                store.commit('setUser', defaultValue)
                store.commit('setUid', user.uid)
              })
              .then(() => {
                redirect('/mypage/dashboard')
              })
          }
        })
    } else if (route.path.includes('mypage')) redirect('/')
  })
}

---

以下の何点かお聞きしたいのですが、

• そもそもonAuthStateChangedはログイン状況が変化したときに発動するもので、何故ログイン後ページ移行する度にonAuthStateChanged内が動作しているのかも理解できておりません。何故でしょうか？
• 上記をふまえ、ログイン後のリダイレクト設定をどのようにしたら良いのか見当がついておりません。普通はこうするよ！的なベストプラクティスがあればお教え頂きたいです。

Answer 1

そもそもonAuthStateChangedはログイン状況が変化したときに発動するもので、何故ログイン後ページ移行する度にonAuthStateChanged内が動作しているのかも理解できておりません。何故でしょうか？

middlewareに実装したためです。middlewareはページが表示されるたびに実行したいものを書くところです。
Nuxt.jsの場合は、stateにログイン状態などを持っておいて、middlewareではstateをチェックし、ログインしていなければリダイレクト、のようなことをすることが多いのではないかと思います。
その場合onAuthStateChangedは別のどこかで実装するわけですが、クライアントサイドで動くどこかであればよく、あまり決まっていないように思えます。私はpluginに書きました。

Comments

[Khy]

ご回答ありがとうございます！
お恥ずかしながらmiddlewareの理解が中途半端でした。
お陰様で実装することができました、ありがとうございました！