vue.jsにおいてfirebaseのAuthenticationのonAuthStateChangedを実装する箇所を教えて欲しいです。

Question

onAuthStateChangedメソッドを記述する箇所が知りたい

現状、下記のコードのようにcreatedフックで、onAuthStateChangedを呼び出しています。
このメソッドをcreatedに記述する事で、認証の状態の変更によってなんで実行されるのかいまいち理解できていません。
methodsプロパティでは、実装できないのでしょうか？

<template>
  <div id="app">
    <div id="nav">
      <Authentication />
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
import Authentication from "@/components/Authentication.vue";
import firebase from "firebase";
import { mapActions } from "vuex";
export default {
  components: {
    Authentication
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
            this.setCurrentUser(user);
        });
  },
  methods: {
    ...mapActions(["setCurrentUser"]),
  }
};
</script>

他の実装パターンの参考サイト

このサイトでは、vue routerのルーティングの箇所に記述しています。

ご回答いただけますと幸いです。

Answer 1

onAuthStateChangedをcreatedに記述する場合とrouter.beforeEachに記述する場合の両方があると思います。それぞれ目的が違います。

• router.beforeEachの場合は、ログインの有無で表示するパスを切り替えるケースで使われます。ログインしていなければログイン画面に遷移。ログインしていれば、指定のURLを表示する場合です。参考サイトの例はこれに該当します。

• createdの場合は、それによってVuexなどの状態を変更して、画面を制御するようなケースに使われます。例えば、このチャットアプリなどが該当します。

---

なおonAuthStateChangedは状態をリッスンして、変更があれば、コールバックを実行するオブザーバーなので、methodsで何度も実行するというよりは、 createdで処理を登録するものだと思います