Подтвердить что ты не робот

Как добавить динамическое перенаправление на реактивный маршрутизатор?

У меня есть компонент знака, который должен быть доступен для пользователей, не прошедших проверку подлинности. И сразу после аутентификации этот компонент должен стать недоступным.

   var routes = (
      <Route handler={App}>
        <Route name="signIn" handler={signIn}/>
        {/* redirect, if user is already authenticated */}
        { localStorage.userToken ? (
            <Redirect from="signIn" to="/user"/>
          ) : null
        }
      </Route>
    );

Router.run(routes, (Handler, state) => {
  React.render(<Handler {...state}/>, document.getElementById('main'));
});

Этот код отлично работает, если пользователь перезагрузил webapp по какой-либо причине после аутентификации, но, конечно же, это не так, если пользователь не перезагрузил webapp. Я попытался использовать this.context.router.transitionTo прямо к компоненту SignUp, но он работает ужасно - компонент получает визуализацию, затем выполняется script.

Итак, я хочу добавить перенаправление прямо в переменную маршрутов, чтобы перенаправить маршрутизатор, даже не пытаясь отобразить компонент.

4b9b3361

Ответ 1

Вместо проверки вашего потока аутентификации и условного предоставления определенных маршрутов я бы рекомендовал другой подход:

Если вы используете response-router 0.13.x, я бы рекомендовал использовать методы willTransitionTo на ваших компонентах, когда вам нужно проверить аутентификацию, Он вызывается, когда обработчик собирается визуализировать, что дает вам возможность прервать или перенаправить переход (в этом случае проверьте, проверен ли пользователь, перенаправляйтесь на другой путь, если нет). См. Пример примера проверки подлинности: https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js

Для версий > 0.13.x это будет onEnter и Enterhooks. См. Пример auth-flow здесь: https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

В основном вы перемещаете поток проверки проверки подлинности от своей переменной routes и в события перехода/перехватчики. Перед тем, как обработчик маршрута получит визуализацию, проверьте auth и перенаправьте пользователя на другой маршрут.