React/Redux의 Node/Express에서 사용자 정의 오류 메시지를 표시하는 방법?

Question

사용자 인증을 위해 passportjs를 사용하고 있으며 인증에 실패 할 경우 클라이언트 측 (이 경우 React/Redux)에서 렌더링되는 사용자 정의 오류 메시지를 표시하려고합니다.

경로 :

app.post(
    '/api/login', 
    (req, res) => { 
     passport.authenticate('local-login', (err, user, info) => { 

     if (!user) return res.status(400).send({ msg: 'Please verify account first' }); 

     })(req, res); 
    } 
); 

행동 작성자 : 나는 오류 및 콘솔 그러나 그것을 로그 아웃을 잡을 때

export const loginUser = (values, history) => async dispatch => { 
    try { 
    const res = await axios.post('/api/login', values); 
    dispatch(deleteMessage()); 
    dispatch({ type: FETCH_USER, payload: res.data }); 
    history.push('/'); 
    window.Materialize.toast(`Welcome back ${res.data.local.email}!`, 4000); 
    } 
    catch(err) { 
    console.log('Error:', err); 
    } 
} 

, 나는 표준 상태 (400) 오류 메시지 대신 얻을 : { msg: 'Please verify account first' }

Error: Request failed with status code 400 
    at createError (createError.js:16) 
    at settle (settle.js:18) 
    at XMLHttpRequest.handleLoad (xhr.js:77) 

맞춤형 오류 메시지를 표시하는 더 좋은 방법이 있습니까? 당신은 변수 고해상도의 범위에 있어야

Answer 1

수정 될 싶어.

심판 : https://github.com/axios/axios/issues/960#issuecomment-309287911

Answer 2

, 나는 다음과 같은 접근 방식 (외부 .catch을()) 제안 :

if(res.status === 400) { 
    const error_msg = res.msg 
    dispatch(loginError(error_msg)) 
} 

이

Answer 3

가

console.log('Error:', err); 

이

당신이 너무 어떤 오류 메시지를 변경할 수있는 당신 필요. 아니면 서버의 응답 err이 캐치에 console.log(error.response)에 console.log(error)에서 { msg: 'Please verify account first' }