🛠️ 로그인 후 인증이 필요한 API 호출 401 오류로 실패하는 상황

📜 문제 상황

증상: 로그인 후 토큰이 localStorage에 저장되었으나 문자열이 아닌 [object Object] 형식으로 나타남.

결과적으로 인증을 위해 이 토큰을 요구하는 모든 후속 API 요청(예: 쓰레기 기록 API)에서는 토큰이 인식되지 않았거나 잘못된 형식임을 나타내는 '401 Unauthorized' 오류를 반환 이슈.

콘솔 로그에는 실제 토큰 문자열 대신 [object Object]가 표시되었으며 인증이 필요한 API 요청은 실패.

📜 문제 원인

근본 원인:

토큰의 'localStorage'에 잘못된 값을 저장하여 발생. 특히 처음에 response.data.data.accessToken 대신 response.data를 사용.

response.data에는 실제 토큰 문자열이 아닌 객체가 포함.
객체 구조는 { data: { accessToken: 'your_jwt_token_here' } }

객체를 localStorage에 직접 저장하면(JSON.stringify()를 사용하여 문자열로 변환하지 않고) JavaScript는 암시적으로 toString() 메서드를 사용하여 객체를 문자열로 변환.

객체의 경우 toString()은 저장되고 있던 [object Object]를 반환합니다.

따라서 localStorage.getItem('token')을 검색하면 예상된 JWT 토큰 문자열 대신 [object Object]가 반환.

유효한 토큰을 기대하는 백엔드 API가 이 잘못된 문자열을 거부하여 '401 Unauthorized' 오류가 발생.

📜 문제 해결

해결 단계:

토큰 경로 수정: response.data 대신 response.data.data.accessToken에 액세스하도록 코드를 업데이트

(토큰 문자열이 있는 정확한 경로)

response.data는 백엔드에서 전체 응답 페이로드에 액세스.

response.data.data는 페이로드 내의 중첩된 data 객체에 액세스하고

response.data.data.accessToken은 실제 토큰 문자열을 검색.

토큰 문자열만 저장: localStorage.setItem('token', response.data.data.accessToken)을 사용하여 객체가 아닌 localStorage에 토큰 문자열만 저장.

이렇게 하면 토큰이 올바른 형식으로 저장됩니다.

수정 후 console.log(localStorage.getItem('token'))에는 [object Object]가 아닌 실제 토큰 문자열이 표시. 또한 인증된 API 호출(예: 쓰레기 기록 API)이 토큰을 성공적으로 인식하여 '401' 오류를 해결.

결과: localStorage에 저장된 토큰 문자열만 사용하여 인증을 위해 이 토큰을 사용하는 모든 API 요청이 문제 없이 진행.

📂 요약

문제: 토큰이 [object Object]로 잘못 저장되어 인증 실패가 발생했습니다.

원인: localStorage에 response.data.data.accessToken(토큰 문자열) 대신 response.data(객체)를 저장합니다.

해결책: localStorage에 response.data.data.accessToken을 저장하도록 코드를 업데이트하여 토큰 문자열만 저장되도록 하여 인증된 API 요청이 올바르게 작동하도록 했습니다.