Использование промежуточного программного обеспечения для проверки сеанса пользователя response redux

Question

Я потратил около 1 недели на редукцию, прежде чем погрузиться во что-нибудь значительное. После завершения большинства учебных пособий я сделал, я понял, хорошо, я понимаю перевождь, но как, черт возьми, я делаю сложную систему: P

Я начал идти о создавая свои системы действия:

function requestLogin(creds) { 
    return { 
     type: LOGIN_REQUEST, 
     isFetching: true, 
     isAuthenticated: false, 
     creds 
    } 
} 

function receiveLogin(user) { 
    return { 
     type: LOGIN_SUCCESS, 
     isFetching: false, 
     isAuthenticated: true, 
     id_token: user.id_token 
    } 
} 

function loginError(message) { 
    return { 
     type: LOGIN_FAILURE, 
     isFetching: false, 
     isAuthenticated: false, 
     message 
    } 
} 

Но как я могу использовать каждый используемый маршрутизатор (используя react-router), чтобы узнать, есть ли у пользователя сеанс после хранения зарегистрированных пользователей в состоянии редукции?

Я хотел создать что-то, что будет выполнено с каждым видом. Просто напишите функцию, которую exec() в каждом представлении?

Answer 1

Да, вы создаете функцию, которая выполняется всякий раз, когда вы переходите на маршрут, требующий входа.

import LoginActions from '../loginActions'; 

const requireLogin = (nextState, replace) => { 
    store.dispatch(LoginActions.CheckLogin()); 
    const {login} = store.getState(); 
    if (!login.isAuthenticated) 
    replace('/login'); 
}; 

вызова его в маршрутизаторе:

<Router component={Root}> 
<Route path="/dashboard" onEnter={requireLogin} component={dashboard}/> 
</Router> 

Answer 2

Вы можете реализовать фильтр для аутентификации путей, требующих от пользователя заверено использованием более высокого порядка компонентов.

Создать оберточной компоненту

import React from 'react'; 
import { connect } from 'react-redux'; 
export default function(ComposedComponent) { 
    class AuthFilter extends React.Component { 
     // triggered when component is about to added 
     componentWillMount() { 
      if (!this.props.userAuthenticated) { 
       console.log("navigate to login"); 
       this.context.router.push('/login'); 
      } 
     } 
     // before component updated 
     componentWillUpdate(nextProps) { 
      if (!nextProps.userAuthenticated) { 
       console.log("navigate to login"); 
       this.context.router.push('/login'); 
      } 
     } 
     render() { 
      return <ComposedComponent {...this.props} /> 
     } 
    } 
    AuthFilter.contextTypes = { 
     router: React.PropTypes.func.isRequired 
    } 
    function mapStateToProps(state) { 
     return { userAuthenticated: state.authenticated }; 
    } 
    return connect(mapStateToProps)(AuthFilter); 
} 

А затем добавить обертывание на свой маршрут компонента, как:

Route path="/asset" component={AuthFilter(AssetRoute)}/>