Javascript Axios API Cache (axios 요청이 서버로 안갈 때)

본문을 보는 사람들은 Javascript 로 http 요청을 보낼 때 대부분 Axios 를 사용할 것이다.

 

오늘도 평소처럼 Axios 를 활용해서 http 요청을 보내는데

생각했던 대로 동작하지 않는 케이스를 발견했다.

 

 

사용자가 로그인을 하면 서버는 auth_token 을 저장한 cookie 를 전달한다.

(사용자가 새로고침을 할 때 auth_token 을 체크하기 위함)

 

 

사용자가 로그아웃을 하면 서버는 요청에 담긴 cookie 에서 auth_token 을 확인

해당 auth_token 정보에 대해 추가 접근을 차단한다. (expire day=-1)

 

 

현재 어떤 페이지던 로그인 토큰을 확인하기 위한 요청이 있으며

해당 요청에서는 항상 cookie 에 담긴 auth_token 이 만료되지 않았는지 확인한다.

 

---

여기서 문제가 발생했다.

cookie 를 서버에서만 만료시키고 client 에서는 삭제해주지 않은 것이다.

 

로그인 -> 홈페이지 -> 로그인 체크 (token cookie 가 존재)

 

로그아웃 -> 로그인 페이지 -> 로그인 체크 (token cookie 가 존재)

-> 홈페이지 url 로 접속 -> 로그인 체크 (token cookie 가 존재)

 

 

원래 생각했던 프로세스대로 동작하면 로그아웃 후

홈페이지 url 로 갔을 때 로그인 체크 요청에서 token 이 만료돼서

라우터가드가 로그인 페이지로 보낼 것이라 생각했다.

 

 

그러나 해당 상황에서 서버 로그를 확인했을 때 아무런 요청을 받지 않았다. (Bold 처리된 상황)

developer tools 에서 네트워크 요청을 봤을 때는 200 ok 를 받고 있었다.

 

 

요약 : 로그인 체크 요청이 서버로 도착하지 않았는데 200 ok 를 받아버린 상황..?

 

브라우저에 캐시가 남는 것인가.. 라는 의문을 가지고 검색하다 보니..

axios-cache-adapter 라는 게 있으며 해당 adapter 의 동작 방식은 아래와 같다.

 

최초 요청 시 request 와 response 에 대해 저장한다.

동일한 요청이 발생할 시 저장된 response 를 돌려준다.

 

default option 에서 요청에 대한 cache 를 생성한다.

 

삽질 끝..

해당 내용을 찾은 후 axios 요청에서 cache 를 없애는 방향으로

검색하여 문제를 해결할 수 있었다.

 

axios 요청에서 cache 를 없애는 방법은 생각보다 다양했고...

해당 내용은 다른 포스팅에서 작성하겠다.