Question

如何在 React Native 中等待来自 Firebase 身份验证的持久用户

2019-05-12

2188

javascript firebase react-native firebase-authentication expo

我在我的 React Native 应用程序中使用 firebase auth（通过 expo），身份验证通过观察者（包括持久用户）正常工作：

import firebase from "firebase";

firebase.auth().onAuthStateChanged(user => {
    if (user) {
        this.props.setUser(user);
    }
}).bind(this);

我显示一个带有登录/注册的登录屏幕，如果用户使用帐户登录，我会转发到主应用程序。应用程序启动后，在加载持久用户时， onAuthStateChanged 方法需要一段时间才能触发，这导致我的应用程序短暂显示此登录屏幕然后离开。 我更希望有一个加载屏幕，直到正确确定身份验证状态。

但如果没有持久用户，onAuthStateChanged 永远不会触发，所以我没有要等待的特定事件。我可以使用超时计时器，但这似乎不是一个好的解决方案，因为必要的等待时间可能因硬件和连接速度的不同而有很大差异。

如何正确解决这个问题，即我如何知道没有持久用户？

Answer 1

当用户未坚持时，Firebase 错误阻止

var isLoading = true;

   firebase.auth().onAuthStateChanged(user => {
        if (user) {
            isLoading = false;
            this.props.setUser(user);
        }
    }, error => {
       isLoading = false;
   }
}).bind(this);

Answer 2

onAuthStateChanged 仅在加载完成后才会触发其功能。因此，当触发时，您可以假定身份验证已完成加载，而不管用户的值如何。我最终使用 expo-splash-screen 在身份验证加载时显示加载屏幕。

示例：

export default () => {
    const [isAuthenticationLoaded, setIsAuthenticationLoaded] = React.useState(false);

    firebase.auth().onAuthStateChanged((user) => {
        if (user) setUser(user);
        setIsAuthenticationLoaded(true);
    });

   React.useEffect(() => {
        SplashScreen.preventAutoHideAsync();
    }, []);

    React.useEffect(() => {
        if (isAuthenticationLoaded) {
            SplashScreen.hideAsync();
        }
    }, [isAuthenticationLoaded]);
    ...
}