response router - Перенаправление после входа в систему

Question

Не могли бы вы помочь мне в понимании механизма перенаправления, который я мог бы использовать с последней версией response router (v1.1.0). Я хотел бы перенаправить на url в зависимости от успеха или отказа для входа в систему пользователя. Я попытался сделать следующее Сначала создал историю использования.

let history = createBrowserHistory(); 

затем попытался оттолкнуть состояние с помощью

history.pushState(null, 'abc') 

Ничего не происходит. Не могли бы вы сообщить мне правильный способ сделать переходы. Из документов я понял, что API transitionTo() нет в последних версиях. Это будет замечательно Если бы вы могли указать на простой рабочий пример.

Заранее спасибо.

Answer 1

Вы можете зарегистрировать «крючки» на своих маршрутах, которые срабатывают при входе и выходе из маршрутов. Ознакомьтесь с документацией для onEnter and onLeave hooks. .

Существует также example of requiring auth на маршруте и перенаправлять на другой путь, если пользователь не вошел в систему

Вот отрывок взят из требует аутентификации пример внутри app.js:

function requireAuth(nextState, replaceState) { 
    if (!auth.loggedIn()) 
    replaceState({ nextPathname: nextState.location.pathname }, '/login') 
} 

// And from the route configuration, use the requireAuth function in onEnter... 
<Router history={history}> 
    <Route path="/" component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
</Router> 

nextState и replaceState аргументы - это объекты от rackt/history и впрыскиваются в метод, который вы передаете в OnEnter.

Answer 2

Ответ от @terranmoccasin правильный. Однако существует общая потребность в очень немногих примерах адреса.

Предположим, вам нужно обеспечить несколько маршрутов (панель мониторинга1, панель мониторинга2, ...). Как вы перенаправляетесь на исходную страницу после успешного входа в систему? Другими словами, что вы делаете с {nextPathname: nextState.location.pathname}?

Вот что я делаю в ./containers/LoginContainer.js:

import { push } from 'react-router-redux'; 
const mapStateToProps = (state) => ({ 
    nextPathname: state.routing.locationBeforeTransitions.state.nextPathname, 
}); 
const mapDispatchToProps = (dispatch) => ({ 
    changeLocationOnSignIn: (nextPathname) => { 
    dispatch(push(nextPathname)); 
    }, 
}); 

и ./components/Login.js

componentWillReceiveProps(nextProps) { 
    // user signed in or signed up, assuming redux. you may use this elsewhere. 
    if (nextProps.user.status === 'authenticated' && nextProps.user.user && 
    !nextProps.user.error) { 
     this.props.changeLocationOnSignIn(this.props.nextPathname); 
    } 

React-маршрутизатор 2.4.0 (апрель 2016) представил withRouter, который создает HOC. Однако он завершает React.createClass, а не класс JS. Мне не удалось заставить его работать с редукс-формой и т. Д. Кроме того, я думаю, что вышеприведенный код легче понять.

Answer 3

Как @JohnSz упоминает, что у меня также были проблемы с использованием withRouter. Вместо этого я сделал это, как указано здесь: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#programmatic-navigation

const RouteComponent = React.createClass({ 
    contextTypes: { 
    router: React.PropTypes.object.isRequired 
    }, 
    someHandler() { 
    this.context.router.push(...) 
    } 
}) 

В основном:

1. Определение contextType
2. Использование this.context.router.push (...)

Cheers.

Answer 4

Хотел бы обновить эту тему, потому что я потратил немало времени на то, чтобы пообщаться с этим. В React Router 2.0.x, replaceState устарел в пользу замены. Смотрите здесь для подробностей: https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

Правильный способ сделать это было бы что-то вроде этого:

function requireAuth(nextState, replace) { 
    if (!userExists()) { 
    replace({ 
     pathname: '/signin', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

export const renderRoutes =() => (
    <Router history={browserHistory}> 
     <Route path="protectedRoute" component={Protected} onEnter={requireAuth} /> 
     <Route path="signin" component={SignIn} /> 
    </Route> 
    </Router> 
); 

Затем в компоненте зарегистрировались, то вы можете перенаправить после успешного знака, как это:

signInFunction({params}, (err, res) => { 
    // Now in the sign in callback 
    if (err) 
    alert("Please try again") 
    else { 
    const location = this.props.location 
    if (location.state && location.state.nextPathname) { 
     browserHistory.push(location.state.nextPathname) 
    } else { 
     browserHistory.push('/') 
    } 
    } 
}) 

Answer 5

Реагировать Router v4.2

Я использую React-16,2 & React-маршрутизатор-4.2

и я получаю решение этой this.props.history.push("/");

Мой рабочий код:

.then(response => response.json()) 
     .then(data => { 
      if(data.status == 200){ 
       this.props.history.push("/"); 
       console.log('Successfully Login'); 
      } 
     }) 

Я следовал этот документ redirect-on-login-and-logout