Cộng đồng Hỏi & Đáp của Inflearn

직접 코드 따라서 작성하면서 (강사님이 만들어두신 브랜치 체크아웃해서 실습하지 않고) 강의 진행하신 분들은 api/index.js 파일에

if (status === UNAUTHORIZED) return onUnauthorized()

로 되어 있을텐데, return 을 제거해야합니다.

원래 의도대로라면, 서버에서 401을 뱉으면 api/index.js 의 axios 사용하는 catch 블록에서 {"error":"Login failure"} 를 담은 예외를 던져줘야 하는데, return onUnauthorized() 실행으로 에러오브젝트 전달하는 부분이 실행되지 않습니다.

그 결과, 서버에서 401 을 반환받은 경우일지라도, Login.vue 컴포넌트 onSubmit 메소드에서는 .then() 으로 가서 처리가 되고, return onUnauthorized() 실행 결과에는 accessToken 값이 없는 상태이므로 여기서 1차적으로 예외가 발생하여

"Cannot read property 'accessToken' of undefined" 

가 출력됩니다. 이 예외로 인해 .catch() 로 가게 되고, 여기서는 data.error 가 없으니까

"Cannot read property 'error' of undefined" 

오류가 발생하고, 로그인 실패시에 화면에 출력하려는 빨간 문구도 나오지 않게 됩니다.

혹시나 저같은 분이 또 있을까 싶어서 남겨둡니다 참고하세요

와 진짜 유예본님 최고.. 

저도 같은 문제가 일어나요.

server api를 보면 401 코드로 error 메세지를 출력합니다.

const request = (method, url, data) => {
    const {token} = localStorage
    if (token) setAuthInHeader(token)
    return axios({
        method,
        url: DOMAIN + url,
        data
    })
    .then(result => result.data)
    .catch(result => {
        console.log(result.response)
        const { status } = result.response
        if (status === UNAUTHORIZED) return onUnauthorized()
        throw result.response
    })
}

이중에서 이전시간에 작성한

if (status === UNAUTHORIZED) return onUnauthorized()

위 코드 때문에 데이터를 리턴하지 않아서 그런것 같아 보입니다.

응답 데이터가 undefined로 뜨는걸 보면 api 서버 동작이 의심스럽네요. api 서버가 실행중인지 먼저 점검해 주세요.