Question

我正在按照vuegram的说明使用vuex和firebase来实现用户身份验证。我尝试了多种方法来分离Firebase侦听器，以下是唯一一种停止警告错误的方法：

var unsubscribe=fb.auth.onAuthStateChanged(user=>{
    if(user){
        store.commit('setCurrentUser',user)
        store.dispatch('fetchUserProfile')

        fb.usersCollection.doc(user.uid).onSnapshot(doc => {
            store.commit('setUserProfile', doc.data())
        })
    }
})
unsubscribe();

但是，上面的代码只是在signOut（）上停止警告，我再也无法更新数据了。

我的store.js文件：

var unsubscribe=fb.auth.onAuthStateChanged(user=>{
    if(user){
        store.commit('setCurrentUser',user)
        store.dispatch('fetchUserProfile')

        fb.usersCollection.doc(user.uid).onSnapshot(doc => {
            store.commit('setUserProfile', doc.data())
        })
    }
})

export const store=new Vuex.Store({
    state:{
        currentUser:null,
        userProfile:{}
    },
    actions:{
        clearData({commit}){
            commit('setCurrentUser',null)
            commit('setUserProfile', {})
        },
        fetchUserProfile({ commit, state }) {
             fb.usersCollection.doc(state.currentUser.uid).get().then(res => {
                commit('setUserProfile', res.data())

            }).catch(err => {
                console.log(err)
            })
        },
        updateProfile({ commit, state }, data) {
            let displayName = data.displayName

            fb.usersCollection.doc(state.currentUser.uid).set({
                displayName: displayName
            }, {merge:true}).then(function() {
                alert("Document successfully written!");
            })
            .catch(function(error) {
                alert("Error writing document: ", error);
            });
        }
    },
    mutations:{
        setCurrentUser(state, val) {
            state.currentUser = val
        },
        setUserProfile(state, val) {
            state.userProfile = val
        }
    }
})

signOut方法：

signOut: function(){
        fb.auth.signOut().then(()=> {
            this.$store.dispatch('clearData')
            this.$router.push('login')
        }).catch(function(error) {
            console.log(error);
        });
    }

我的Firebase规则：

allow read, write: if request.auth.uid!=null;

Answer 1

由于注销时您仍然具有活动的侦听器，因此系统检测到客户端失去了读取该数据的权限并拒绝了该侦听器。这意味着您需要先退出监听器，然后再退出，以防止出现错误消息。

请参见documentation on detaching listeners，在附加侦听器时，您首先会获得对退订功能的引用：

unsubscribe = fb.usersCollection.doc(user.uid).onSnapshot(doc => {
    store.commit('setUserProfile', doc.data())
})

然后在退出之前调用该函数：

signOut: function(){
    unsubscribe();
    fb.auth.signOut().then(()=> {
        this.$store.dispatch('clearData')
        this.$router.push('login')
    }).catch(function(error) {
        console.log(error);
    });
}

Answer 2

如果您在许多页面上都有一个注销按钮，只需导航到不同的页面并从那里调用注销。这样您就不必因取消订阅而乱扔代码。

Answer 3

您还可以检查Firestore rules。

如果存在的话：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

更改为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

请注意，这是不安全的，仅用于开发目的。要了解Firestore规则的工作原理，请查看this youtube video。

onSnapshot中未捕获的错误：错误：signOut（）上缺少权限或权限不足

3 个答案: