Nuxtでmiddlewareの記述が効かない

Question

現在生じている現象は以下の通りです。
ログインしていない場合に、/ → /auth/loginのリダイレクトはできるのですが、
ログインしている場合に、 /auth/login → /のリダイレクトが効きません。

分かりにくいかと思いますので、gifを添付します。

①はじめログインしていない状態でトップページにアクセス→ログインページにリダイレクト。
②そのあとログイン後にログインページにアクセス→そのままログインページが表示される。

②がなぜ起こるのかがわかりません。

Nuxt.jsのプロジェクトで認証機能をつけるために、middleware/Authenticated.jsを以下の様に記述しました。

import firebase from "~/plugins/firebase";

export default function({ store, route, redirect }) {
  firebase.auth().onAuthStateChanged(user => {
    const currentPath = route.path;
    if (user) {
      console.log(currentPath);
      //ログインしている時の処理
      if (currentPath === "/auth/login" || currentPath === "/auth/signup") {
        store.commit("resetErrors");
        console.log("you are already logged in");
        redirect("/");
      }
    } else {
      //ログインしてない時の処理
      console.log(currentPath);
      if (currentPath !== "/auth/login" && currentPath !== "/auth/signup") {
        store.commit("resetErrors");
        console.log("you are not logged in yet!");
        redirect("/auth/login");
      }
    }
  });
}

Authencticated.jsの読み込みについては、nuxt.config.jsで以下の追記してます。

router: {
  middleware: 'Authenticated',
},

原因が分かる方が入れば、是非教えていただければ嬉しいです。
よろしくお願いいたします。

---

●補足情報
vuex-persisitedstateを削除し、Authenticated.jsを以下のように編集し、再度試してみたのですがうまくいきませんでした。。。泣

import firebase from "~/plugins/firebase";

export default function({ store, route, redirect }) {
  firebase.auth().onAuthStateChanged(user => {
    const currentPath = route.path;
    if (user) {
      //ログインしている時の処理
      //まずデータベースの内容をstoreに保存
      firebase
        .database()
        .ref(user.uid)
        .on('value', res => {
          const userInfo = {
            uid: res.uid,
            name: res.name,
            email: res.email
          }
          store.commit('setUser', userInfo);
        })
      store.commit("resetErrors");
      //不正なアクセスを除去
      if (currentPath === "/auth/login") {
        redirect("/");
      }
    } else {
      //ログインしてない時の処理
      store.commit("resetErrors");
      //不正なアクセスを除去
      if (currentPath !== "/auth/login" && currentPath !== "/auth/signup") {
        redirect("/auth/login");
      }
    }
  });
}

全く検討がつきません。。。

Answer 1

お世話になっております。
自己解決いたしましたので、下に記します。

これはユーザー認証にFirebase Authentication（以下Auth）を使用しており、フロントエンドの認証情報をバックエンドが知り得ないから起こる現象です。

皆さん知るとおり、Authはフロントエンドと直接通信をしており、AuthからsignInTokenをもらうことでログインをしています。
しかしNuxt.jsではSSR実行時にStoreを初期化するので、サインインしていることをStoreの変数から読み取ろうにもできません。

ですのでCookieでsignInTokenをバックエンドに送信し、ログインしていることをあらかじめ伝える必要があります。その記述はStoreのnuxtServerInit()で書くことができます。

書き方についてはFirebase、Firebase Admin SDKの両方を使用するので、公式ドキュメントを参照ください。