Nuxt、Firebaseでのログイン情報がリロードすると消えてしまう。

Question

タイトルの通りなのですが、FirebaseのGoogleLoginでログインすることは可能でstoreにユーザ情報は入っているのですが、リロードすると消えてしまいます。どうすれば解決できるでしょうか？
なかなか思うように開発が進まず困っております。どうか、ご回答よろしくお願いいたします。

ログインメソッド

      userGoogleLogin({ commit }) {
        return firebase.auth()
          .signInWithPopup(provider)
          .then((result) => {
            this.isAuthenticated = true;
            return commit('setUser', result.user)
          }).catch((error) => {
            console.log(error)
          })
      }

Store

state: {
      user: null,
      post: null,
      users: [],
      posts: [],
    },
    getters: {
      isAuthenticated(state) {
        return !!state.user
      },
      currentUser: state => state.user,
      users: state => state.users,
      user: state => state.user
    },

index.vue 関係ありそうな部分のみ抜粋

<template>
      <div class="one-half column centered" v-else>
        <div v-if="user" v-cloak>
          <p>Information pulled from the firebase <code>/user</code> dataset</p>
          <pre v-text="`${JSON.stringify(user, null, 2)}`"></pre>
                  from user: {{ user.displayName }}
                  from $store.state: {{ this.$store.state.user.displayName }}
                  uid {{ user.key }}
                  uid {{ this.user.key }}
        </div> 
      </div>
</template>

<script>
  export default {
    // middleware: 'authenticated', // checking if auth'd with firebase kinda sucks as the middleware is triggered before firebase is ready

    computed: {
      ...mapState([
        'user'
      ]),
      ...mapGetters([
        'currentUser'
      ]),
      imageAlt() {
        return `Profile image for ${this.user.displayName}`
      }
    },
    data() {
      return {
        editing: false
      }
    },
    methods: {
    },
  }
</script>

Answer 1

nuxt.jsを使う時にlocalStorageでstoreを永続化する にもあるように，vuex の情報はリロードすると消えてしまいます．

そのため，vuex-persistedstate などを組み込んで store の情報を localstorage などに保存する必要があります．

store に情報を格納するだけの場合は上記のような対応で十分ですが，firebase はそれ自体でもログイン情報を扱います．こちらは基本的にリロードしても消えないはずです．

今回のように，ログイン情報の永続化だけが目的の場合は vuex-persistedstate を入れるよりも，こちらで対応したほうが firebase を利用する上では適しているかもしれません．

firebase が扱うログイン情報に対応するには，firebase.auth().onAuthStateChanged を使います．

例えば，以下のような実装になると思います．

created () {
  firebase.auth().onAuthStateChanged((user)=> {
    if (user) {
      // ログインしたときに実行するメソッド
      this.setUser(user)
    }
  })
},
methods () {
  ...mapActions([setUser]) // サインイン情報を利用したいストアアクション
}

これでリロードしてもログイン情報を検知して store に格納されると思います．

Comments

[anonyrabbit]

回答ありがとうございます！
言われた通りにやってみたら、、、できました！！！
丁寧に回答してくださり、本当にありがとうございます！！！助かりました！