javascript - 检查用户是否在 native react 之前登录

Question

在我的 react native 应用程序中，我将用户信息安全地保存在 key 链上，以便在他们登录一次后，我保存信息，然后下次用户来时，信息已经存在，因此用户不需要登录。

问题是我在 componentDidMount 中进行检查，然后如果用户以前从未登录过或在上次访问中注销过，我会将他们重定向到登录屏幕，如下所示:

componentDidMount() {
    //Need to check if they've signed in before by checking the USER_INFO.
    SecureStore.getItemAsync("USER_INFO").then(response => {
        //Have they signed in before?
        if (response !== undefined) {
          //yes.
          //continue with app stuff.
        }
        else {
          //Not logged in before need to go to login.
          const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
              NavigationActions.navigate({ routeName: 'Login', params: this.props.navigation.state.params }),
            ]
          });
          this.props.navigation.dispatch(resetAction);

        }
    });

}

问题是我收到一条警告“警告:只能更新已安装或正在安装的组件”。这通常意味着您在未安装的组件上调用了 setState、replaceState 或forceUpdate。这是一个禁止操作。这是有道理的，因为我在屏幕渲染之前进行重定向，但问题是，我应该在哪里执行这些检查？

谢谢

Answer 1

我发现您正在使用 react 导航。我已经做了你想要完成的同样的事情，但是以不同的方式。

为了简化，我在导航器中有三个屏幕

// Navigator.js
export const RootNavigator = StackNavigator({
  Splash: { screen: SplashView },
  Login: { screen: LoginView },
  RootDrawer: { screen: RootDrawer }
}, {
  headerMode: 'none',
  initialRouteName: 'Splash'
});

然后在我的 SplashView(这是我的起点)中，我在其构造函数中对用户进行身份验证。在验证用户身份时，SplashView 只是渲染一个文本，上面写着“Splash Screen”，但显然可以是任何内容。

constructor(props) {
    super(props);

    this.authenticateSession();
}

authenticateSession() {
    const { navigation } = this.props;
    dispatch(storeGetAccount())
      .then(() => {
        navigation.dispatch(navigateToAccountView(true));
      })
      .catch(() => {
        navigation.dispatch(navigateToLoginView());
      });
}

函数navigateToAccountView() 和navigateToLoginView()只是为了让我可以在其他地方使用它们，但navigateToLoginView()看起来像这个

export function navigateToLoginView() {
  return NavigationActions.reset({
    index: 0,
    key: null,
    actions: [
      NavigationActions.navigate({ routeName: 'Login' })
    ]
  });
}