firebase.auth().onAuthStateChanged 在 vuex 中刷新页面后为空

Question

我正在使用 Vuex 和 Firebase 身份验证。重新加载页面时卡住了。 firebase.auth().onAuthStateChanged 需要时间来响应。但我需要同时重新加载页面。我在互联网上看过很多教程，其中大部分是路由器保护，但我不想要。我有一些用户登录的路线，然后可以导航到该路线。

我正在申请的 App.vue。

created () {
    firebase.auth().onAuthStateChanged(async user =>{
        if (user){
          await this.$store.dispatch('autoSignIn',user)
        }
      })
  }

如果用户在重新加载页面之前登录，则这是我在重新加载页面时触发自动登录的 vuex 操作。

 autoSignIn ({commit}, payload) {
            commit('setUser',{email:payload.email, userId:payload.uid})

        }

这是我的吸气剂

 isAuthenticated:state => {
    return state.user !== null && state.user !== undefined ? state.user : null
 }

这里我称我的 getter isAuthenticated。

  getEventsByUser({getters,commit}){

            let data = [];

            firebase.database().ref('usuario/' + getters.isAuthenticated.userId + '/eventos/')
                .on("value", eventos =>{
                     eventos.forEach(evento =>{
                        data.push({"id":evento.key, ...evento.val()})
                    });
                    commit('setEventsByUser',data)
                })

        },

这是调度动作的组件

<template>
    <div>
        <div v-for="(event,id) in getEventsByUser" :key="id">
            {{event}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "MyEvents",

        computed:{
            getEventsByUser(){
                return  this.$store.getters.getEventsByUser;
            },
        },
        mounted() {
            this.$store.dispatch('getEventsByUser')
        },



    }

这是我重新加载页面时的错误

Answer 1

当页面加载时，Firebase 会检查为用户存储的 ID 令牌是否仍然有效。这需要它调用服务器，因此可能需要一些时间。在此检查期间，用户将为 null，因此您的代码需要在任何地方处理它。

在您的 onAuthStateChanged 处理程序中，您可以正确处理：

firebase.auth().onAuthStateChanged(async user =>{
    if (user){

但是在getEventsByUser 中，您假设有一个用户，这（如错误消息所示）不正确。因此，在将侦听器附加到数据库之前，您需要在此处添加一个检查，以查看是否有用户：

getEventsByUser({getters,commit}){
    let data = [];
    if (getters.isAuthenticated) {
        firebase.database().ref('usuario/' + getters.isAuthenticated.userId + '/eventos/')
        ...