【Vue】VuexでFIrebaseのログイン認証情報をリロードしても保持して活用する方法

どーも、ぐるたか@guru_takaです。

Vue × Firebaseで簡単なwebアプリを作成していた際、リロードするとVuex内のStateが消えてしまうことに気づきました。

その結果、Vuexで管理しているログイン情報情報を使ったwebページは何も表示されません。ここでは、その対応策を紹介します！

スポンサードリンク

具体的な状況
解決策：createdでonAuthStateChangedを呼び出す
- createdについて
- onAuthStateChangedについて
参考リンク

具体的な状況

FirebaseのAuth機能でログイン済み
ログイン情報を使って、プロフィール画面を表示
プロフィール画面をリロードすると、何も表示されなくなる

ゴールはプロフィール画面でリロードしても、もう一度情報を取得して、情報を表示させることです。

解決策：createdでonAuthStateChangedを呼び出す

結論からいうと、Vueのライフサイクルcreatedで、firebase.auth().onAuthStateChangedを呼び出せなOK！

そして、所望の処理(私の場合は、プロフィール情報を取得)を入れましょう。

....
export default {
  name: "ProfileEdit",
  created () {
    firebase.auth().onAuthStateChanged(user => {
      //リロード後に実行したい処理
    })
  },
...
}

ここで、firebase.auth().setPersistence関数で、タブ内のセッションを維持することを忘れないで下さい！

...
firebase.initializeApp(config)
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
...

createdについて

createdはインスタンス生成後に実行されます。なので、リロード直後にも呼び出されるのです！

参考 Vue インスタンスVue.js | 公式

onAuthStateChangedについて

onAuthStateChangedはログインしているユーザーのオブザーバーです。簡単にいうと、ログインしているユーザーの情報を監視してくれます！

ログイン情報のセッションはFirebase側で良しなに保持しています。便利！

なのでリロード直後にonAuthStateChangedを呼び出せば、Firebaseのログイン情報を取得し、その後にやりたい処理を実行できるわけです！

参考 Firebase のユーザーを管理するFirebase | 公式

MEMO

セッションの格納場所はSession Storageです。余談ですが、firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)がなくても、IndexedDBにも色々保存されているので、ログイン情報を取りに行けます！