如何处理 Firestore 身份验证启动画面

Question

我正在尝试实现一个 React Native 应用程序，如果 isLoading = true，应用程序显示启动画面，如果 isLoading = false 和 isAuthenticated = false 应用程序显示身份验证屏幕，如果 isLoading = false 和 isAuthenticated = true 应用程序显示主屏幕。

// Splash screen while app loading
if (isLoading) screens = (<><SplashScreen /></>);
// Authentication screens while user not authenticated
else if (!isLoading && !isAuthenticated)
  screens = (
    <>
      <Stack.Screen
        name="Register"
        component={RegisterScreen}
        options={{ animationEnabled: false }}
      />
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{ animationEnabled: false }}
      />
    </>
  );
// All other screens while user authenticated and onboarded
else
  screens = (
    <>
      <Stack.Screen name="Home" component={TabNavigator} />
      <Stack.Screen name="Product" component={ProductScreen} />
    </>
  );

现在我有了它，所以在应用程序启动时（在 Navigation.js 中）我在 5 秒后设置了一个超时，并回调到 setIsAuthenticated(false) 和 setIsLoading(false)，这会提示应用程序导航到身份验证页面。否则，如果用户已通过身份验证（使用 onAuthStateChanged 检查），我将导航到主页。

useEffect(() => {
  const timeout = setTimeout(() => {
    setIsAuthenticated(false);
    setIsLoading(false);
  }, 5000);
  setTimer(timeout);
  return () => clearTimeout(timer);
}, []);

只要我在导航到正确页面时在 5 秒内 (onAuthStateChanged) 获得身份验证信息，这种方法就可以正常工作。但是，有些情况下网络非常慢，因此在更新身份验证状态之前调用 Timeout 的回调。在这种情况下，由于回调被调用，我首先导航到身份验证屏幕，然后在用户通过身份验证后立即导航到主页。

这似乎不是一个非常可靠的方法，所以我想知道是否有更好的方法来处理这种身份验证方法？

Answer 1

认证api成功后请更改状态。

const [isAuthenticated,setIsAuthenticated] = useState(false);
...
useEffect(() => {
  authAPiCall.then(() => {
     setIsAuthenticated(true);
  })
  const timeout = setTimeout(() => {
    setIsLoading(false);
  }, 5000);
  setTimer(timeout);
  return () => clearTimeout(timer);
}, []);

Answer 2

您可以将所有内容都基于您的 onAuthStateChanged 侦听器和状态管理。在路由器文件中创建一个处理用户对象的状态，并在身份验证状态侦听器中根据 onAuthStateChanged 的初始响应设置对象的状态。这样，如果侦听器 return 为空（无授权用户），您可以将导航器的初始路由设置为登录，否则进入应用程序内部。为了实现加载程序，您可以在路由器中创建另一个名为 isLoading 的状态，并从一开始就将其设置为 true。一旦 auth 侦听器 returns 结果，无论它是 null 还是用户对象，都将 isLoading 的状态更改为 false。在该状态下，您可以 return 在导航器被 return 编辑之前查看加载程序。类似这样

const [loading,setLoading] = useState(true)
//here goes the abovementioned logic of setting the loading
if(loading){
return <LoaderComponent/>}
return <Navigator/>

如何处理 Firestore 身份验证启动画面

How to handle Firestore authentication splash screen

firebase

react-native

authentication

google-cloud-firestore

splash-screen