React Navigation 5 身份验证流程答案

【问题标题】：React Navigation 5 Auth FlowReact Navigation 5 身份验证流程
【发布时间】：2020-05-07 18:42:37
【问题描述】：

在我的React Native 应用程序中，我使用React Navigation 5 并尝试将用户路由到身份验证堆栈，如果用户未通过身份验证，即AsyncStorage 中没有access_token。

我很困惑的是如何从AsyncStorage 获取令牌，因为它是一个异步过程。我似乎无法在我的App 组件中调用await，即如果我尝试它会给我一个错误，如果我不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;

【问题讨论】：

您是否尝试过使用钩子和异步回调来获取令牌以及一些加载状态的组合？

标签： react-native react-navigation

【解决方案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)
 }},[])

  return (
    <Provider store={store}>
      <NavigationContainer>
        { loading &&
         <ActivityIndictor size='small' />
        }
        {
          authenticated && !loading
          ? <RootNavigator />
          : <AuthNavigator />
        }
      </NavigationContainer>
    </Provider>
  );
};

export default App;

【讨论】：

谢谢！这很好用，但我确实有一个问题。因为我们使用的是useEffect()，所以每次组件挂载/更新时都会调用这个函数。我担心因为AsyncStorage操作是async，这不会对应用程序的性能产生负面影响吗？
实际上，这个函数将像 componentDidMount 一样工作，并且不会像您在 useEffect 中看到的那样调用每次更新，我将数组作为参数传递，这意味着它将在每次更新时呈现。
我还将编辑此答案并将异步操作移至其他地方，因为不推荐在挂钩回调中处理异步函数。

【解决方案2】：

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

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

【讨论】：