Маршрутизация между экранами через поток авторизации - PullRequest
Новая
       9

Маршрутизация между экранами через поток авторизации

0 голосов
/ 07 ноября 2018

У меня есть поток, в котором я записываюсь на прием к услуге. React Router используется для навигации. Есть несколько таких потоков, в которых экраны отличаются. Первые несколько экранов в каждом потоке не требуют входа пользователя в систему, и, следовательно, к ним можно получить прямой доступ, тогда как страница подтверждения и другие подобные экраны ближе к концу в каждом из потоков требуют его входа в систему.

Итак, прямо перед этим набором экранов у меня есть страница регистрации, на которой также есть ссылка на страницу входа в систему. Что-то вроде «Уже пользователь? Логин» Я должен привести его на эту страницу регистрации, если он не прошел проверку подлинности, попросить его завершить процесс регистрации и затем продолжить его. Если он уже вошел в систему, я полностью пропущу этот шаг и перенесу его прямо на другие экраны. Я обрабатываю это через частные маршруты, как показано ниже 

      <PrivateRoute
        exact
        path="/gift/shipping-options"
        toPath="/gift/register"
        {...this.props}
        component={ShippingOptions}
      />
      <PrivateRoute
        exact
        path="/gift/confirm"
        toPath="/gift/register"
        injectStripe
        component={GiftConfirmation}
        {...this.props}
      />
      <PrivateRoute
        exact
        path="/gift/purchase-complete"
        toPath="/gift/register"
        component={PurchaseComplete}
        {...this.props}
      />
      <Route
        exact
        path="/gift/register"
        render={() => (
          <Signup
            headerProps={{ showBackButton: true, showCloseButton: true }}
            footerProps={{ showItems: false }}
            headerText="CREATE AN ACCOUNT"
            showLoginLink
            loginPath="/gift/login"
            handleExitClick={() => {
              this.props.history.push('/');
            }}
            {...this.props}
          />
        )}
      />

Три / подарочные пути являются частными и должны быть перенаправлены на Регистрация, если не авторизованы 

class PrivateRoute extends React.PureComponent {
  render() {
    const {
      component: Component,
      user,
      location,
      toPath,
      injectStripe,
      ...rest
    } = this.props; // eslint-disable-line react/prop-types
    if (!user.userData.id) {
      return (
        <Redirect
          to={{
            pathname: toPath || '/register',
            search: location.search,
            state: { from: this.props.location }, // eslint-disable-line react/prop-types
          }}
        />
      );
    } else {
      if (injectStripe) {
        return (
          <StripeProvider apiKey={Config.stripeApiKey}>
            <Component {...rest} />
          </StripeProvider>
        );
      }
      return <Component {...rest} />;
    }
  }
}

Эта часть работает нормально, и я попадаю в поток аутентификации, только если я еще не вошел в систему. Но на каждом из экранов приложения есть заголовок с кнопкой «назад», который при нажатии возвращает меня на предыдущий экран.

Прямо сейчас задняя часть реализована просто как 

  handleBackClick() {
    this.props.history.goBack();
  }

Но моя проблема в том, что, если пользователь действительно зарегистрировался в потоке, нажав кнопку «Назад» на любом экране и вернувшись к этому моменту после того, как он зарегистрировался / вошел в систему, он фактически попадет на страницу регистрации / входа, которая не должно происходить, вместо этого он должен приземлиться на экране перед страницей регистрации, т. е. если он прошел через a -> signup -> login -> b или, a-> signup-> b -> c

Возвращаясь из б, он должен быть на прямой. У меня проблемы с реализацией этого. Проверка потока / предыдущего пути по нажатию кнопки назад и переход к точке a - сложная задача, поскольку существует несколько потоков с разными экранами, которые могли быть до регистрации. Каков наилучший способ сделать что-то подобное (возможно, перенаправление на уровне маршрута)? Спасибо

...