2016-09-04 10 views
0

react-router-redux를 example으로 설정했습니다. 그러나 dispatch(push(url))은 주소 표시 줄의 콘텐츠 /보기 또는 URL을 변경하지 않습니다. 내 콘솔에서 LOCATION_CHANGE 및 CALL_HISTORY_METHOD가 주어진 주소로 성공적으로 호출되었음을 알 수 있습니다. 이 경우 로그인이 성공하면 예상 한 redirect 주소가로드되지 않습니다.react-router-redux가 콘텐츠 /보기를 변경하지 않습니다.

행동에 기호

export function loginUser(email, password, redirect="/dashboard") { 
    return function(dispatch) { 
    dispatch(loginUserRequest()); 
    return fetch(`http://localhost:3000/users/sign_in/`, { 
     ... 
    }) 
    .then(parseJSON) 
    .then(response => { 
     try { 
     let decoded = jwtDecode(response.token); 
     dispatch(loginUserSuccess(response.token)); 
     dispatch(push(redirect)); 
     } catch (e) { 
     ... 
     } 
    }) 
    } 
} 

routes.js

import React from 'react'; 
import { Router, Route, browserHistory, IndexRoute } from 'react-router'; 
import { syncHistoryWithStore } from 'react-router-redux' 
... 
import store from '../store'; 

const history = syncHistoryWithStore(browserHistory, store) 

let Routes = 
    <Router history={history}> 
    <Route path='/' component={MainContainer}> 
     <IndexRoute component={Home} /> 
     <Route path='/sign_in' component={SigninForm} /> 
     <Route path='dashboard' component={authenticateComponent(Dashboard)} /> 
    </Route> 
    </Router> 

export default Routes; 

store.js

import { createStore, applyMiddleware, compose } from 'redux' 
import thunkMiddleware from 'redux-thunk' 
import createLogger from 'redux-logger' 
import reducers from './reducers'; 

const createStoreWithMiddleware = compose(
    applyMiddleware(
    thunkMiddleware, 
    createLogger() 
) 
) 

const store = createStore(reducers, createStoreWithMiddleware); 

export default store; 

AuthenticateComponent.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { push } from 'react-router-redux'; 

export function authenticateComponent(Component) { 

    class AuthenticateComponent extends Component { 

    componentWillMount() { 
     this.checkAuth(this.props.isAuthenticated); 
    } 

    componentWillReceiveProps (nextProps) { 
     this.checkAuth(nextProps.isAuthenticated); 
    } 

    checkAuth (isAuthenticated) { 
     if (!isAuthenticated) { 
     let redirectAfterLogin = this.props.location.pathname; 
     this.props.dispatch(push(`/sign_in?next=${redirectAfterLogin}`)); 
     } 
    } 

    render() { 
     return (
     <div> 
      {this.props.isAuthenticated === true 
      ? <Component {...this.props}/> 
      : null 
      } 
     </div> 
    ) 
    } 
    } 

    const mapStateToProps = (state) => ({ 
    token: state.auth.token, 
    isAuthenticated: state.auth.isAuthenticated 
    }); 

    return connect(mapStateToProps)(AuthenticateComponent); 

} 

routing: routerReducer을 내 결합 형 감속기에도 넣었습니다. 이 문제는 무엇이 될 수 있습니까?

+0

routerMiddleware을 적용 할 필요가 밝혀졌습니다. 대시 보드에 jsx 오류가 있으면 탐색 할 수 없습니다. – vijayst

+0

@vijayst 콘솔에서 발생한 오류가 없습니다. 그것이 내가 작동하지 않는 부분이 혼란스러워하는 이유입니다. 기본적으로 로그인 및 로그 아웃 후 모든 '디스패치 (push (url))'는 예상 주소로 리디렉션되지 않습니다. – spondbob

+0

사용자가 인증되지 않은 경우 대시 보드 페이지가 다시 로그인 페이지로 리디렉션됩니까? 그렇다면 검사를 필요로하는 또 다른 장소입니다. – vijayst

답변

1

내가 그것을 콘솔에 오류가 발생 않습니다뿐만 아니라

+2

React 라우터에는 인증에 사용할 수있는 onEntry 훅이 있습니다. – vijayst