한 탭에서의 로그아웃이 다른 탭에서는 미적용된다?

Refresh 동작과 token을 cookie로 관리해주는 것으로 로그인-로그아웃-리프레시의 여정이 종료된 줄 알았다.

이것은 나의 착각이었다.

쿠키로 token 문제를 처리한 바로 다음 날, 백엔드 동료분께서 또 하나의 문제를 제기해주셨다.

2개의 서비스 사이트에서 동일한 계정으로 로그인 후, 하나의 탭에서 로그아웃을 해도

다른 탭에서 로그아웃 처리가 이뤄져야 하는데 특정 페이지에서는

로그인이 된 채로 기능들이 동작한다는 것이었다.

 

---

문제 접근 방법 01

localStorage는 오리진이 같은 경우 모든 탭과 창에서 데이터를 공유한다는 점을 떠올려 

 

1) 로그아웃 시 localStorage에 로그아웃을 증명하는 데이터를 저장

2) _app.tsx에서 useEffect를 사용해 로그아웃 함수를 호출하며

만약 localStorage에 로그아웃 증명 데이터가 있다면

localStorage에 저장된 로그아웃 데이터를 삭제하고 새로고침을 수행,

useEffect의 의존성 배열에는 localStorage에 저장해둔 Access Token을 추가했다.

 

동작은 했지만 뭔가 불필요했다. 분명 더 편하게 문제 해결에 접근할 수 있는 방법이 있었고

나는 그 해결 방법을 반드시 찾을 수 있었다.

그렇게 몇 시간 동안 고민을 하다 가장 효율적인 방법을 찾았다.

문제 접근 방법 02(해결)

사내 코드에는 token을 JS Class의  instance로 관리하고 있는 컴포넌트가 있었다.

Access Token을 사용할 때, 항상 localStorage에 있는 Access Token보다

JS의 Access Token을 먼저 가져와 return하는 컴포넌트라는 특징을 이번에 파악하게 되었는데, 

instance에서 관리되어지는 return 문을 주석 처리하고 동작을 체크해봤을 때 원하던 대로

다른 탭에서도 로그아웃 처리가 이뤄졌다.