如何在ReactJS中正确监听Firestore和Firebase身份验证的快照。

huangapple go评论47阅读模式
英文:

how to correctly listen to snapshot from firestore and firebase auth in ReactJS

问题

我对firebase authfirestore snapshot的流程应该如何进行感到相当困惑。在我看来,由于快照会将文档的更新发送给我,那么我应该在用户登录后开始快照,或者在他们刷新浏览器后开始快照。

所以,我应该在这里实现所有的快照吗?

// Firebase导入

// 所有初始化操作
auth.onAuthStateChanged((user) => {
    if (user) {
        // 执行所有快照操作
    } else {
        // 未登录
        // 重定向到登录页面
        // 我应该取消订阅我的快照吗?如何做到?
    }
}

我是否正确理解,用户登录后会触发onAuthStateChanged?如果他们刷新浏览器或注销,onAuthStateChanged也会被触发。

此外,当用户更改时,如何取消订阅我的快照并重新订阅当前用户?

是否可能从firebase auth中直接从用户A更改为用户B,而不是从null更改为存在或从存在更改为null?如果可以,我应该如何通过我的快照来预测?

Note: Please provide the code part you want me to translate, and I will do the translation for you.

英文:

I'm quite confused with how the flow should be with the firebase auth and firestore snapshot. In my mind, since snapshot is sending me the update for the document, then I should start the snapshot after the user is login, or maybe after they refresh their browser.

So, is it correct that I should implement all of my snapshot in here?

//firebase import

//all initialization
auth.onAuthStateChanged((user) => {
    if (user) {
    //do all snapshot
    } else {
    //not signed in
    //redirect to login page
    //should I unsubscribe my snapshot? how do I do it?
    }
}

Am I understanding correctly, that after the user is logged in, then the onAuthStateChanged will be triggered? if they refresh their browser or log out, then onAuthStateChanged will also be triggered.

also, how could I unsubscribe my snapshot when the user is changed? and subscribe again with the current user?

is it possible for firebase auth rather than changed from null to exists or exists to null but, from User A to User B directly? if yes, how could I anticipate it with my snapshot?

答案1

得分: 1

是的,理解正确,用户登录后将触发onAuthStateChanged

是的,更改身份验证状态会触发onAuthStateChanged

是的。当页面加载时,Firebase会尝试恢复先前登录的用户。无论成功与否,当完成时它都会调用onAuthStateChanged:如果能够恢复凭据,则会使用有效的用户调用它,如果以前没有已登录的用户,或者无法恢复凭据,则会使用null进行调用。

这在很大程度上取决于您如何订阅快照。如果您在onAuthStateChangedif (user)分支中订阅,您可以在每次调用onAuthStateChanged时取消订阅。

类似于:

let unsubscribe;
auth.onAuthStateChanged((user) => {
  if (unsubscribe) {
    unsubscribe();
    unsubscribe = null;
  }
  if (user) {
    unsubscribe = onSnapshot(....); 
  } else {
    // 未登录
    // 重定向到登录页面
    // 我应该取消订阅我的快照吗?如何做到?
  }
}

是的,这是可能的。

是的,可以通过在ifelse块之外放置取消订阅逻辑来实现这一点。


我建议尝试使用onAuthStateChanged监听器,并在实际操作中检查其行为,如果无法使其工作,请反馈。

英文:

> Am I understanding correctly, that after the user is logged in, then the onAuthStateChanged will be triggered?

Yes, changing the authentication state triggers onAuthStateChanged.

> if they refresh their browser or log out, then onAuthStateChanged will also be triggered.

Yes. When the page loads, Firebase tried to restore any previously signed in user. No matter whether tis succeeds or not, it'll call onAuthStateChanged when this is done: either with a valid user when it was able to restore the credentials, or with null if there was no signed-in user before, or if it was unable to restore the credentials.

> also, how could I unsubscribe my snapshot when the user is changed? and subscribe again with the current user?

This very much depends on how you subscribe to the snapshot. If you subscribe in the if (user) branch of onAuthStateChanged, you can unsubscribe whenever onAuthStateChanged gets called again.

Something like:

let unsubscribe;
auth.onAuthStateChanged((user) => {
  if (unsubscribe) {
    unsubscribe();
    unsubscribe = null;
  }
  if (user) {
    unsubscribe = onSnapshot(....); 
  } else {
    //not signed in
    //redirect to login page
    //should I unsubscribe my snapshot? how do I do it?
  }
}

> is it possible for firebase auth rather than changed from null to exists or exists to null but, from User A to User B directly?

Yes, this is possible.

>if yes, how could I anticipate it with my snapshot?

We did this above already by putting the unsubscribe logic outside of the if and else blocks.


I recommend giving the onAuthStateChanged listener a try and inspecting its behavior in practice, and reporting back if you can't get it to work.

huangapple
  • 本文由 发表于 2023年5月24日 20:55:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/76323781.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定