firebaseでのログイン情報をvue側に反映させる方法

vuejsとfirebaseでのログインの理解が難しかったのでまとめ。

vuejsのアプリのウェブブラウザでログインをする。

vuejsでのログインはstateに情報が保持されているかいないかでログイン判定しているに過ぎない。

firebaseにはログアウト操作をしないかぎり、ログイン情報、およびログインしているよという情報が保持される。

vue側で何も設定していない場合は、ウェブブラウザをリロードすると、vuexのstateに保持していたログイン情報が消える。＝ログアウトと同じ状態になる。

→一方で、firebase側では、ログアウトはされておらず、ログインの状態となっている。

→そのため、firebaseのonAuthStateChangedというメソッドをvuejs側で使って、firebase側でのログイン情報・ログインの有無・ログインの状態をvuejsに渡せば、ログイン、ログアウトの状態をvuejsがきちんと反映する。

→ 具体的な方法としては、onAuthStateChangedを使ってvuejsでfirebaseに保持されているログイン情報を取得し、vuejsからstateにログイン情報をセットする。

もちろん、ログアウトしていたら、その情報がfirebaseからstateに渡される。

→mounted()に上記メソッドを組み込むことで、リロードしてもウェブブラウザの読み込み時にはfirebaseのログイン状態を反映する仕組み。