동적라우팅 페이지에서 쿠키가 삭제가 안될 때

1. 상황 설명

플라스크로 서버를 구성하고, 로그인 기능을 구현했습니다. 여러 정적 라우트와 동적 라우트 페이지가 루트 페이지에 연결되어 있었습니다.

로그인을 하면 JWT 쿠키를 만들어 클라이언트에서 토큰을 쿠키에 저장했습니다. 모든 페이지에서는 navbar로 로그인과 로그아웃을 모두 할 수 있어야 했습니다.

2. 에러 현상

정적 라우트 된 페이지에서는 아무런 문제가 없이 쿠키가 삭제되었습니다. 하지만 동적 라우트된 페이지에서는 쿠키가 삭제되지 않고 살아있었습니다. 여기서 더 의문점이 생겼습니다. 쿠키 삭제 코드가 잘못되었다면 모든 페이지서 안되었어야 하는데, 다른 곳에서는 같은 쿠키 삭제 코드인데도 불과하고 삭제가 되었습니다. 그래서 동적 페이지에서만 되지 않는 이유를 알고 싶어 졌습니다.

 

3. 해결방법

정확한 해결방법은 정확히 파악하지 못했습니다. 하지만 쿠키를 삭제하는 코드에서  path=/ 를 붙이는 이유를 조금 이해가 되었습니다. 

document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';

위 코드는 쿠기의 시간을 만료시켜 삭제를 하는 코드입니다.

 

참고자료에서 브라우저 쿠키를 삭제하는 100% 설루션은 없다고 합니다. 문제는 쿠키가 키 "이름"뿐만 아니라 "도메인" 및 "경로"로도 고유하게 식별된다는 것입니다. 쿠키의 "도메인"과 "경로"를 모르면 확실하게 삭제할 수 없습니다.

 

이처럼 정적 라우팅 된 페이지는 도메인과 경로가 하나뿐이기 때문에 path=/ 를 붙이지 않아도 삭제가 잘 되었고 동적 라우팅된 페이지에서는 도메인과 경로가 자꾸 바뀌게 되어 위의 코드가 제대로 동작이 되지 않았던 것 같습니다.

이러한 문제를 방지하기 위해서 쿠키를 삭제할 때 최상위 루트 경로의 쿠키를 시간 만료시키기 위해서 path=/ 붙여줘 했습니다.

document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=C.kr;path=/;';

이 코드처럼 path를 /로 지정해주고 해 본 결과 동적 라우팅 된 페이지에서도 정상적으로 잘 동작되었습니다.

참고자료에서 쿠키를 삭제할 때 원하는 방법대로 삭제가 되지않을 수 있게 때문에 삭제할때 path=/를 추가해주는 것을 권고하고 있습니다.

---

참고자료

https://stackoverflow.com/questions/595228/how-can-i-delete-all-cookies-with-javascript

How can I delete all cookies with JavaScript?

https://mchch.tistory.com/104

[JavaScript] document.cookie 쿠키삭제 삭제안됨?