인프런 커뮤니티 질문&답변
작성한 질문수
비밀번호 틀리게 입력했을 때, 로그인창에 Login failure 라는 단어가 뜨질 않습니다.
해결된 질문
작성
·
501
0
.then(data => {// 토큰을 브라우저 로컬호스트에 저장
localStorage.setItem('token', data.accessToken)
setAuthInHeader(data.accessToken)
this.$router.push(this.rPath)
console.log(data)
})
.catch(err => {
this.error = err.data.error
// this.error = err.response.data.error
console.log('에러발생1: '+err)
console.log('에러발생2: '+err.data.error)
})
그래서 로그찍어보고 컨솔창에서 확인해보니 아래와 같이 에러가 발생하는데 왜 그런지 모르겠습니다.
에러발생1: TypeError: Cannot read property 'accessToken' of undefined
Uncaught (in promise) TypeError: Cannot read property 'error' of undefined at eval (Signin.vue?3d55:88)
답변 5
14
직접 코드 따라서 작성하면서 (강사님이 만들어두신 브랜치 체크아웃해서 실습하지 않고) 강의 진행하신 분들은 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"
오류가 발생하고, 로그인 실패시에 화면에 출력하려는 빨간 문구도 나오지 않게 됩니다.
혹시나 저같은 분이 또 있을까 싶어서 남겨둡니다 참고하세요
0
0
0
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()위 코드 때문에 데이터를 리턴하지 않아서 그런것 같아 보입니다.
0
ㅠㅠ 와 너무 감사합니다 이걸로 2틀 동안 로그아웃 해결 못하고 있었는데...