React Navigation 5 Auth Flow

Question

在我 React Native 应用，我用的是 React Navigation 5 并试图将用户路由到认证堆栈，如果用户未被认证，即没有 access_token 在 AsyncStorage.

我困惑的是如何从 AsyncStorage 因为它是一个异步过程。我似乎不能 await 召唤 App 组件，即如果我尝试，它就会给我一个错误，如果我不尝试，它就会给我一个错误。await 它，然后我得到一个 promise.

我如何使用 React Navigation 5?

这是我的 App 组件。

const App = () => {

  const authenticatedUser = AsyncStorage.getItem("access_token");
  return (
    <Provider store={store}>
      <NavigationContainer>
        {
          authenticatedUser !== null || typeof authenticatedUser !== "undefined"
          ? <RootNavigator />
          : <AuthNavigator />
        }
      </NavigationContainer>
    </Provider>
  );
};

export default App;

Answer 1

你必须等待从AsyncStorage获得一个token，就像这样。

const App = () => {

const [loading, setLoading] = usState(true)
const [authenticated, setAuthenticated] = usState(false)

useEffect(()=>{async()=>{

 const authenticatedUser = await AsyncStorage.getItem("access_token");

 setLoading(false)

  if(authenticatedUser !== null) setAuthenticated(true)

 }},[])

  const authenticatedUser = AsyncStorage.getItem("access_token");
  return (
    <Provider store={store}>
      <NavigationContainer>
        { loading &&
         <ActivityIndictor size='small' />
        }
        {
          authenticated && !loading
          ? <RootNavigator />
          : <AuthNavigator />
        }
      </NavigationContainer>
    </Provider>
  );
};

export default App;

Answer 2

我建议你使用一些加载器。从AsyncStorage加载数据，检查token是否有效，如果无效则刷新，加载用户配置文件，并做更多的初始化人员。在代码中，你可以这样做

let Loader=()=>{
const [loadingData, setLoading]= useState(null);
let effect=async ()=>{
    let credentials = await AsyncStorage.getItem(“data”)
    setLoading(credentials||{})
}
useEffect(()=>effect())
If (loadingData===null)
     return <LoadingView/>
return <YourRouter {...{loadingData}}/>