React Navigation 5 Auth Flow

Question

В моем приложении React Native я использую React Navigation 5 и пытаюсь направить пользователей в стек проверки подлинности, если пользователь не прошел проверку подлинности, т.е. в AsyncStorage нет access_token.

Что я Я не понимаю, как получить токен из 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 вот так.

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, проверьте, действителен ли токен, и обновите sh, если это не так, загрузите профиль пользователя и сделайте больше для персонала инициализации. В коде вы бы сделали это!

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}}/>