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

Question

我使用的是react npm，带有状态管理"mobx-react"，所有共享状态都在"AppStore“中。当应用程序刷新"AppStore.signIn()“从本地存储中获取用户并设置"AppStore.signedUser”时，否则值为undefind。如果用户存在，该组件将呈现用户，但如果不存在，则应用程序应在呈现之前重定向到"/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。在render函数中，检查组件是否正在加载，如果加载了，则显示一个加载器，如果愿意，则不显示任何内容。当signIn()函数完成后，将loading设置为false，react将自动重新呈现并相应地重定向用户。HAve查看一些代码：

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