🧨 axios Authorization 인식 에러

문제 발생 상황

• 로그인을 한 후에 좋아요 버튼이나 장바구니 담기 버튼을 눌렀을 때 다시 로그인을 요구하는 알림창이 표시되고 로그인 페이지로 이동하는 문제가 발생

Local storage 에는 token 이 존재함

웹 브라우저의 개발자 도구인 Network를 확인하니 Authorization 에 토큰이 담기지 않고 Post를 보내는 것을 확인할 수 있음

Local storage에는 토큰이 존재하고 console.log 할 때도 로그인 상태가 true인데,
Authorization 에는 토큰이 담기지 않는 것을 알 수 있음

문제 해결 방안 - 성공

• Axios의 요청 인터셉터를 추가하여 요청이 전달되기 전에 헤더에 Authorization를 포함시켜 문제를 해결함

원래 코드 : 헤더에 Authorization을 미리 작성

변경된 코드 : 인터셉터를 사용하여 Authorization을 설정

Authorization 에 토큰이 잘 담겨 Post를 보내는 것을 확인할 수 있음

처음 렌더링이 될 때, 저장된 토큰이 빈 문자열이므로 Authrozation 값이 빈 문자열로 설정되기 때문에 이를 해결하기 위해서는 Axios 인터셉터를 이용해 헤더에 토큰 값을 설정해줘야 함!