React-машинопись с mobx + реагирующий маршрутизатор - PullRequest
Новая
       58

React-машинопись с mobx + реагирующий маршрутизатор

0 голосов
/ 21 сентября 2018

У меня есть токен JWT в локальном хранилище, а также пользовательское хранилище mobx.

Когда приложение запускается, у меня есть запрос на декодирование токена выборки на сервер.Поэтому я хочу дождаться окончания этого запроса, а затем выбрать переключатель реакции маршрутизатора.Это похоже на асинхронную охрану в угловых 2+.

Вот мой код: 

class App extends React.Component<AppProps> {
  public render() {
    return (
      <div className="App">
        <Observer>
          {() =>
            this.props.spinnerStore.spinner ? (
              <div className="spin-container">
                <Spin spinning={this.props.spinnerStore.spinner} size="large" />
              </div>
            ) : null
          }
        </Observer>
        <Observer>
          {() =>
            this.props.userStore.get().id ? (
              <Switch>
                <Route exact path="/" render={() => <Home userStore={userStore} />} />
                <Redirect from="*" to="/" />
              </Switch>
            ) : (
              <Switch>
                <Route exact path="/" render={() => <Home userStore={userStore} />} />
                <Route path="/signin" render={() => <SignIn userStore={userStore} />} />
                <Route path="/signup" render={() => <SignUp spinnerStore={spinnerStore} />} />
                <Route path="/change-password" render={() => <ForgotPassword spinnerStore={spinnerStore} />} />
                <Route
                  path="/activate/:token"
                  render={({ match }) => <ActivateAccount match={match} userStore={userStore} />}
                />
                <Route
                  path="/callback/:token"
                  render={({ match }) => <ApiCallback match={match} userStore={userStore} />}
                />
                <Route
                  path="/reset/:token"
                  render={({ match }) => <ResetPassword match={match} userStore={userStore} />}
                />
                <Redirect from="*" to="/" />
              </Switch>
            )
          }
        </Observer>
      </div>
    );
  }
}

export class UserStore implements IUserStore {
  constructor() {
    const token = this.tokenService.get();

    if (!token) {
      return;
    }

    this.userService
      .get()
      .then((user: UserModel) => {
        this.user = user;
      })
      .catch(() => {
        this.tokenService.reset();
      });
  }

Есть идеи?

...