どーも、ぐるたか@guru_takaです。
Vue × Firebaseで簡単なwebアプリを作成していた際、リロードするとVuex内のStateが消えてしまうことに気づきました。
その結果、Vuexで管理しているログイン情報情報を使ったwebページは何も表示されません。ここでは、その対応策を紹介します!
具体的な状況
- 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
はインスタンス生成後に実行されます。なので、リロード直後にも呼び出されるのです!
onAuthStateChangedについて
onAuthStateChanged
はログインしているユーザーのオブザーバーです。簡単にいうと、ログインしているユーザーの情報を監視してくれます!
ログイン情報のセッションはFirebase側で良しなに保持しています。便利!
なのでリロード直後にonAuthStateChanged
を呼び出せば、Firebaseのログイン情報を取得し、その後にやりたい処理を実行できるわけです!
MEMO
セッションの格納場所はSession Storageです。余談ですが、firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
がなくても、IndexedDB
にも色々保存されているので、ログイン情報を取りに行けます!
コメントを残す