Как перенаправить мое приложение на страницу входа в систему async

Question

Я использую реагирующий npm, с управлением состоянием "mobx-реагировать", все общие состояния в "AppStore".Когда приложение обновило «AppStore.signIn ()», получило пользователя из localstorage и установило «AppStore.signedUser», иначе значение не определено.Компонент отображает пользователя, если он существует, но если нет, приложение должно перенаправить на «/ signup» перед отображением.Поскольку приложение рендерится быстрее, чем требуется для входа в систему, оно всегда перенаправляет на регистрацию при обновлении, даже если пользователь уже существует.Как я могу перенаправить только после того, как AppStore.signIn () сделано?

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

Вы можете иметь состояние по умолчанию loading: true в вашем штате. В вашей функции рендеринга вы проверяете, загружается ли компонент, если он есть, то вы отображаете загрузчик или ничего, если хотите. Когда функция signIn() завершена, установите загрузку в false, и реакция будет автоматически повторно визуализироваться и перенаправлять пользователя соответствующим образом. Посмотрите на код:

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);