[React] 로컬스토리지에 저장된 Token을 API header전송시 오류

로그인 후 세션스토리지에 accessToken을 저장한 후, navigate('/')를 통해 게시판 화면으로 넘어간다.

그리고, 저장된 토큰을 API의 header에 전송하여 게시판의 정보를 불러와야한다.

그런데 게시판의 정보가 새로고침시에만 API 통신이 성공되어 불러와지는 오류가 발생했다.

살펴보니 로그인 후 저장된 token이 header로 제대로 전송되지 않았던 것이다.

 

[Try 1]

원인

navigate는 HTTP요청을 새로 하지 않고 안의 내용만 바꾸기 때문에, 페이지가 unload되지 않고 내용만 바꿔지는 라우팅이 적용되었기 때문이다.

 

해결

window.location.href나 window.location.replace를 통해 해결할 수 있다.

이를 통해 페이지 전환을 할 시 HTTP요청을 새로 하며, 페이지가 unload되며 새로운 페이지를 불러오기 때문이다.

나는 window.location.replace('/')를 통해 로그인시 페이지가 새로 전환되도록 설정하여 에러를 해결했다.

새로고침되어 데이터가 적용된다.

둘의 차이점은 location.href는 브라우저 뒤로가기 클릭시 뒤로 가지지만, location.replace는 뒤로가기가 불가능하다.

로그인하고 나서 페이지 전환 후, 굳이 로그인으로 다시 돌아가게 하지 않기 위해 replace를 사용했다.

 

✔ [Try 2]

window.location.replace('/') 를 통해 해결하니 새로고침을 해서 찝찝했다.

그리고 이에 대한 해결..! 😂 

 

🙄 원인

API연결 통신을 돕는 함수에서 코드에서 에러가 났던 것이었다..!ㅜㅠㅜ

위에 access_token 변수를 통해서 로컬스토리지에 있는 토큰을 가져오도록 코드를 짰지만,

이렇게 선언하면 로그인되기 전에 실행되었기 때문에 변수에 담긴 토큰이 없다!

그래서 console 을 보면 위에 변수명으로 값 호출시에는 값이 안나오고

아래 다시 로컬스토리지에서 값을 가져오도록 실행하면 값이 나온다.

즉, 에러가 났던 원인은 아래 GetList함수를 통해 게시판 글을 가져오는데 아무리 해봤자, 이미 없는 토큰이 담긴 변수를 데리고 왔기 때문에 값이 header에 값 전달이 안되었던 것이다.

 

✨ 해결

게시판을 불러오는 API함수 GetList 내부에서 로컬스토리지의 토큰 값을 받아온다.

그렇다면 로그인 후 저장된 토큰 값을 다른 페이지에서도 제대로 받아오고 API통신시 header에 잘 전달 된다.

이제 window.location.replace 가 아닌 navigate를 해도 문제없이 정상작동 된다.

 

 

---

참고사이트)

라우팅의 차이

 

window.location.href vs useNavigate vs Link

프로젝트 TIL (2) - [ window.location.replace() ]