Javascript 在React Native中从Firebase登录/注销的最佳方式?

Javascript 在React Native中从Firebase登录/注销的最佳方式?,javascript,firebase,react-native,firebase-authentication,Javascript,Firebase,React Native,Firebase Authentication,我在理解如何实施时遇到问题: 登录用户 继续收听用户的更改 注销用户 取消对侦听器的订阅 使用: const unsubscribe = firebase.auth().onAuthStateChanged((user) => { if (user) { // Signed in } else { // Signed out } }); unsubscribe(); 我知道上面的监听器是推荐的,但我不知道如何使用它。有人能详细解释一

我在理解如何实施时遇到问题:

  • 登录用户
  • 继续收听用户的更改
  • 注销用户
  • 取消对侦听器的订阅
  • 使用:

    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
        if (user) {
            // Signed in
        } else {
            // Signed out
        }
    });
    unsubscribe();
    
    我知道上面的监听器是推荐的,但我不知道如何使用它。有人能详细解释一下吗

    我想知道当我第一次登录一个用户时是否应该调用这个函数,但是我应该在何时以及如何注销他们?我是否应该在应用程序的每个屏幕中调用此函数(例如,在componentDidMount中)

    此外,我应该在哪里
    取消对侦听器的订阅()
    ?在哪个屏幕上?假设有三个屏幕:登录、屏幕1、屏幕2。我在登录屏幕中调用侦听器,然后当用户在屏幕1或屏幕2时,我应该如何继续侦听更改并在应该的时候注销他并取消对侦听器的订阅?

    firebase.auth()。onAuthStateChanged打开一个侦听器,因此一个好主意是创建一个将用户作为输入的useEffect,并根据是否登录更改用户状态。使用注销方法后,将触发onAuthStateChange。然后,您可以通过道具将用户传递到任何您喜欢的全局状态

     useEffect(() => {
        firebase.auth().onAuthStateChanged((user) => {
          if (user) {
             setUser(user)
          } else {
              setUser(null)
          }
      });
       
      }, [user])
    
    
    我使用react查询而不是useEffect,然后我得到用户声明,只是给你另一个例子

     const fetchClaims = async () => {
        setLoading(true);
    
        const fetchedUser = await auth.onAuthStateChanged((user) => {
          if (user) {
            user.getIdTokenResult().then((idTokenResult) => {
              // console.log(idTokenResult.claims);
              setIsClient(idTokenResult.claims.client);
              setIsMaster(idTokenResult.claims.master);
              setNickName(idTokenResult.claims.name);
              setUserEmail(idTokenResult.claims.email);
              setClientName(idTokenResult.claims.clientName);
              setIsPremium(idTokenResult.claims.premium);
              setUserPicture(idTokenResult.claims.picture);
            });
            setUser(user);
            setLoading(false);
          } else {
            setUser(null);
            setIsClient(false);
            setIsMaster(false);
            setClientName(null);
            setUserEmail(null);
            setLoading(false);
            setIsPremium(false);
          }
        });
        return fetchedUser;
      };
    
    
    
    
      useQuery("fetchClaimsData", fetchClaims );
    

    也在@FrankvanPuffelen上发布,谢谢你让我知道!