使用 React Native 正确处理注销

Question

我有一个反应本机应用程序，它根据是否有经过身份验证的 firebase 用户显示不同的导航器。

这是我的主要应用 class:

export default class App extends Component {
  state = { loggedIn: null }

  componentWillMount() {
    firebase.initializeApp({...});

    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({ loggedIn: true });
      } else {
        this.setState({ loggedIn: false });
      }
    });
  }

  renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return (
          <MenuContext>
            <MainNavigator />
          </MenuContext>
        );
      case false:
        return (
          <AuthNavigator />
        );
      default:
        return (
          <View style={styles.spinnerStyle}>
            <Spinner size="large" />
          </View>
        );
    }
  }

  render() {
    return (
      <Provider store={store}>
        {this.renderContent()}
      </Provider>
    );
  }
}

现在，当用户登录时重新呈现正确的导航器，这可以完美地工作。

我遇到的问题是注销。在我的 MainNavigator（用户登录时显示的那个）中，我有一个注销按钮，用于注销用户。像这样实现：

signOutUser = async () => {
    try {
        await firebase.auth().signOut();
    } catch (e) {
        console.log(e);
    }
}

render() {
    return (
        ...
        <Button title="logout" onPress={() => this.signOutUser()} />
    )
}

这符合预期，但是，我收到了以下我想要解决的警告：

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState or forceUpdate on an unmounted component. This is a no-op.

实现此注销功能的最佳实践方法是什么？

编辑： 我正在使用 react-navigation 库来管理我的应用程序导航。

Answer 1

我认为根据 App 组件的状态生成 Navigator 可能很危险，可能会导致此问题。注销时，您应该重定向到负责注册或登录的组件，并且不要让负责此的状态重新生成另一个导航的一部分。

你可以在你的 App Component 中做，而不是 returning MainNavigator 或 AuthNavigator，你可以 return Navigator 和添加一个名为 Loading 的路由，例如，谁将呈现加载屏幕以及谁将是负责根据用户是否登录来路由您的应用程序的 initialRoute。

这种情况下的 StackNavigator 示例

const Navigator = StackNavigator({
  Main: {
    screen: MainComponent,
  },
  Auth: {
    screen: AuthComponent,
  },
  Loading: {
    screen: LoadingComponent
  },
},{
    initialRouteName : 'Loading'
});

在您的 LoadingComponent 中，您将呈现微调器

render() {
  return(
    <View style={styles.spinnerStyle}>
      <Spinner size="large" />
    </View>
  );
}

并且在 LoadingComponent 的 componentDidMount 中：

firebase.auth().onAuthStateChanged(user => {
  if (user) {
      navigate('Home');
  } else {
      navigate('Login');
  }
});

这样一来，当您打开您的应用程序时将显示加载屏幕，然后根据用户是否已登录重定向到正确的页面。

并在您的 signOutUser 重定向到登录页面

signOutUser = async () => {
    try {
        await firebase.auth().signOut();
        navigate('Auth');
    } catch (e) {
        console.log(e);
    }
}

使用 React Native 正确处理注销

Handling logout properly with React Native

firebase

reactjs

react-native

firebase-authentication

react-navigation