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

Question

我正在使用反应npm，状态管理“mobx-react”，“AppStore”中的所有共享状态。 当应用程序刷新“AppStore.signIn（）”从localstorage获取用户并设置“AppStore.signedUser”时，否则该值是unfind。 该组件呈现用户（如果存在），但如果不存在，应用程序应在呈现之前重定向到“/ signup”。 因为应用程序渲染速度比“signIn”完成要快，所以即使用户存在，它也会在刷新时重定向到注册。 我怎样才能在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()函数后，将loading设置为false，并且react将自动重新呈现并适当地重定向用户。 看看一些代码：

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