如何将我的应用程序重定向到登录页面异步

Question

I'm using react npm, with state management "mobx-react", all shared state in "AppStore". As the app refreshed "AppStore.signIn()" get user from localstorage and set "AppStore.signedUser", else the value is undefind. The component renders the user if exist, but if not the app should redirect to "/signup" before rendering . Because the app is rendering faster than it takes "signIn" to be completed, it allways redirects to signup when refreshing, even though a user is exist. how can i redirect only after the AppStore.signIn() is done?

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import AppStore from './store/AppStore';

class App extends Component {

  state = {
    isLogged: false,
    isCheckedLogged: false,
  }

  async componentWillMount() {
    await AppStore.signIn();
    if (AppStore.signedUser) {
      this.setState({ isLogged: true });
    } else {
      this.setState({ isLogged: false });
    }
    this.state.isCheckedLogged = true;
  }

  render() {
    return (
      <div className="App">
        <HashRouter>
          <nav className="main-nav">
            <NavLink exact to="/" className="nav-link">Home</NavLink>
            <NavLink to="/signup" className="nav-link">Signup</NavLink>
          </nav>
          <Switch>
            <Route exact path="/" render={() => this.state.isLogged ?
                (<Home store={AppStore} history={HashRouter} />) :
                (<Redirect to="/signup"/>)} />
            <Route exact path="/signup" render={() =>
                (<Signup store={AppStore} history={HashRouter} />)} />
          </Switch>
        </HashRouter>
      </div>);
  }
}

export default observer(App);

Answer 1

You can have a default state loading: true in your state. In your render function, you check if the component is loading, if it is, then you display a loader, or nothing if you like. When the signIn() function is done, set loading to false, and react will automatically re-render and redirect the user appropriately. HAve a look at some code:

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import AppStore from './store/AppStore';

class App extends Component {

  state = {
    isLogged: false,
    loading: true,
    isCheckedLogged: false,
  }

  async componentWillMount() {
    await AppStore.signIn();
    if (AppStore.signedUser) {
      this.setState({ isLogged: true, loading: false });
    } else {
      this.setState({ isLogged: false, loading: false });
    }
    this.state.isCheckedLogged = true;// not sure this can help, and it's also not 
    // a right way to set state
  }

  render() {
    return (
      <div className="App">
        {! this.state.loading && (

         <HashRouter>
          <nav className="main-nav">
            <NavLink exact to="/" className="nav-link">Home</NavLink>
            <NavLink to="/signup" className="nav-link">Signup</NavLink>
          </nav>
          <Switch>
            <Route exact path="/" render={() => this.state.isLogged ?
                (<Home store={AppStore} history={HashRouter} />) :
                (<Redirect to="/signup"/>)} />
            <Route exact path="/signup" render={() =>
                (<Signup store={AppStore} history={HashRouter} />)} />
           </Switch>
         </HashRouter>
        )}
      </div>);
  }
}

export default observer(App);