在 React-Native 中登录/退出 Firebase 的最佳方式？

Question

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

1. 让用户登录
2. 不断倾听用户的变化
3. 注销用户
4. 取消订阅监听器

使用 ：

const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        // Signed in
    } else {
        // Signed out
    }
});
unsubscribe();

我知道建议使用上述侦听器，但我不明白如何使用它。 有人可以更详细地解释一下吗？

我想知道当我第一次登录用户时是否应该调用这个函数，但是我应该何时以及如何将它们注销？ 我应该在应用程序的每个屏幕中调用这个函数吗（例如在 componentDidMount 中）？

此外，我应该在哪里unsubscribe()到侦听器？ 在哪个屏幕？ 假设有三个屏幕：登录、屏幕 1、屏幕 2 。 我在登录屏幕中调用监听器，然后当用户在屏幕 1 或屏幕 2 中时，我应该如何继续监听更改并在我应该取消订阅监听器时让他退出？

Answer 1

firebase.auth().onAuthStateChanged 打开一个监听器，所以一个好主意是制作一个以用户为输入的 useEffect，并根据您是否登录来更改用户状态。 使用注销方法后，将触发 onAuthStateChange。 然后你可以通过 props 或任何你喜欢的全局状态在任何地方传递用户。

 useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
         setUser(user)
      } else {
          setUser(null)
      }
  });
   
  }, [user])

我使用react-query而不是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 );