은 구성 요소 REDUX

Question

나는 사용자가이 작업을 수행하여 브라우저의 주소 표시 줄에 이동하려고했던 URL로 사용자가-경로를 다시 시도하고 함께 처음으로 호출되지 렌더링 반응 서비스 메소드 호출. 쿠키에 세션이 유효 만료되거나없는 경우에는 401 개 상태를 반환하고 나는 사용자가 로그인하면

1. 이 허용 로그인 화면으로 리디렉션합니다.

2. 사용자가 로그인하지 않은 경우 로그인 화면으로 이동하고 로그인 한 후 원하는 URL로 라우팅하십시오. http://url/app/order 이 로그인 URL로 리디렉션됩니다 : 사용자 후 http://url/auth/login 자신의 자격 증명을 입력 조치가 전달됩니다 있지만하여 Authorizedroute에 대한 렌더링, 같은 사용자가 URL을 입력

여기 문제, 구성 요소가 호출되지 않습니다. 로그인 버튼을 다시 클릭하면 호출됩니다. 다음

는

내 로그인 구성 요소입니다

export class LoginForm extends React.Component { 

componentWillReceiveProps(newProps){ 

    const { location, isAuthenticated, history } = newProps; 
    if(isAuthenticated){ 

     if(location.state && location.state.referrer){ 
      history.push(location.state.referrer.pathname); 
     }else{ 
      history.replace('/app'); 
     } 
    } 
} 

render() { 
    let usernameInput, passwordInput; 
    const { showErrorMessage, errorMessage, onLogin } = this.props; 
    return (


     <div className='sme-login-center-view-container'> 
      <HeaderComponent /> 

      <Col lg={4} lgOffset={4} sm={12} xs={12}> 
       <Col lg={10} lgOffset={2} sm={4} smOffset={4}> 
        <Form className="sme-login-box" onSubmit={(e)=> { 
                 e.preventDefault(); 
                 let creds = {username: usernameInput.value, password: passwordInput.value}; 
                 onLogin(creds);            
                } 
               }> 

          <span className='text-center sme-login-title-text'><h4>User Login</h4></span> 

         <FormGroup >      
          {errorMessage ? (<Alert bsStyle="danger"><strong>Error!</strong> {errorMessage}</Alert>) : null } 
         </FormGroup> 

         <FormGroup controlId="formHorizontalUsername">      
          <FormControl type="username" placeholder="Username" bsStyle="form-rounded" 
           inputRef={(ref) => {usernameInput = ref}} 
          />     
          <FormControl.Feedback> 
           <span className="fa fa-user-o sme-login-input-feedback-span"></span> 
          </FormControl.Feedback>    
         </FormGroup> 

         <FormGroup controlId="formHorizontalPassword">     
          <FormControl type="password" placeholder="Password" 
           inputRef={(ref) => {passwordInput = ref}}/>         
          <FormControl.Feedback> 
           <span className="fa fa-lock sme-login-input-feedback-span"></span> 
          </FormControl.Feedback> 
         </FormGroup> 

         <FormGroup>    
          <Button type="submit" block >Login</Button>    
         </FormGroup> 

        </Form> 
       </Col> 
      </Col> 
     </div> 

    ); 
} 
} 

LoginContainer

const mapStateToProps = state => { 
    return state.authenticationReducer.login 
} 

export const Login = withRouter(connect(mapStateToProps,{ onLogin: loginUser })(LoginForm)) 

로그인 조치

export function requestLogin(creds) { 
    return { 
    type: LOGIN_REQUEST, 
    isFetching: true,  
    isAuthenticated: false, 
    creds 
    } 
} 
export function receiveLogin() { 
    return { 
    type: LOGIN_SUCCESS, 
    isFetching: false, 
    isAuthenticated: true 
    } 
} 
export function loginError(message) { 
    return { 
    type: LOGIN_FAILURE, 
    isFetching: false, 
    isAuthenticated: false, 
    errorMessage: message 
    } 
} 
export function loginUser(creds) { 
    return dispatch => {  
    dispatch(requestLogin(creds))  
     return axios.post(url, data) 
      .then(response => { 
       if (!response.status === 200) {      
        dispatch(loginError(response.statusText))      
       } else { 
        dispatch(receiveLogin()) 
       } 
      } 
     ).catch(function (error) { 
      dispatch(loginError(error.response.statusText)) 
     } 
    ) } 
    } 

로그인 감속기 :

export function login(state = { 
     isFetching: false, 
     isAuthenticated: false 
     }, action) { 

     switch (action.type) { 
     case LOGIN_REQUEST: 
     case LOGIN_SUCCESS: 
     case LOGIN_FAILURE: 
      return Object.assign({}, state, action) 
     default: 
      return state 
     } 
    } 

,

는 경로 구성 요소 공인

class AuthorizedRouteComponent extends React.Component { 

    componentWillMount() { 
    this.props.getUser(); 
    } 
    render() { 
    const { component: Component, pending, logged, location, ...rest } = this.props; 
    return (
     <Route {...rest} render={props => { 
     if (pending) return <div>Loading...</div> 
      return logged 
       ? <Component {...this.props} /> 
       :<Redirect to={{ 
        pathname: '/auth/login', 
        state: { referrer: location } 
      }}/> 
      }} /> 
     ) 
     } 
    } 

    const mapStateToProps = state => { 
     return state.authenticationReducer.loggedUser 
    } 

    const AuthorizedRoute = connect(mapStateToProps, { getUser: getLoggedUser })(AuthorizedRouteComponent); 

    export default AuthorizedRoute 

로그인 한 사용자 조치 당신은 당신의 행동 작성자의 사용자를 저장하는 로컬 스토리지를 사용할 수 있습니다

export function loggedUser(state = initialState, action) { 
    switch (action.type) { 
    case FETCH_REQUEST: 
    case FETCH_SUCCESS: 
    case FETCH_FAILURE: 
     let obj = Object.assign({}, state, action); 
     return obj; 
    default: 
     return state 
    } 
} 

Answer 1

export function requestFetch() { 
    return { 
    type: FETCH_REQUEST,  
    pending: true,  
    logged: false 
    } 
} 
export function receiveFetch(userData) { 
    return { 
    type: FETCH_SUCCESS, 
    pending: false, 
    logged: true, 
    userData 
    } 
} 
export function fetchError(message) { 
    return { 
    type: FETCH_FAILURE, 
    pending: false, 
    logged: false, 
    errorMessage:message 
    } 
} 
export function getLoggedUser() { 
    return dispatch => {  
    dispatch(requestFetch()) 
    return axios.get('/o3/rest/user/userdetails') 
      .then(response => { 

       if (!response.status === 200) { 
        dispatch(fetchError(response.statusText))     
       } else { 
        dispatch(receiveFetch(response.data)) 
       } 
      } 
     ).catch(function (error) { 
      dispatch(fetchError(error.response.statusText)) 
      } 
     ) 
    } 
} 

그리고 마지막으로 내 로그온 사용자 감속기 찾기 사용자를 가져 오는 혐의 :

export function getLoggedUser() { 
    return dispatch => {  
    dispatch(requestFetch()) 
    return axios.get('/o3/rest/user/userdetails') 
      .then(response => { 

       if (!response.status === 200) { 
        dispatch(fetchError(response.statusText))     
       } else { 
        localStorage.setItem('userData',response.data) 
       } 
      } 
     ).catch(function (error) { 
      dispatch(fetchError(error.response.statusText)) 
      } 
     ) 
    } 
} 

그리고 인덱스 파일에이 질문에 :

const userData = localStorage.getItem('userData') 
if(userData){ 
    store.dispatch({ 
     type: FETCH_SUCCESS, 
     pending: false, 
     logged: true, 
     userData 
    }) 
} 

페이지를 새로 고침하거나 http://url/app/order 같은 URL을 확인하는 것입니다 입력 할 때마다 파견에 해당하는 경우, 현재 로그인 한 사용자가 존재입니다 액션은 당신의 상태를 업데이트합니다.