Access Token으로 로그인 여부 판단 시 문제 발생부터 해결까지

개요

현재 만들고 있는 프로젝트 client 부분에서 로그인 상태가 아닐 때 사용할 수 없는 기능들인 좋아요와 댓글작성 기능들이 있다.

처음에는 아직 개발 상태니 깊이 생각하지 않고 처음 받은 Access Token의 유무로 로그인상태를 판단했다.

 

문제 발견

이후 다른 기능들을 개발중에 뭔가 이상하다는 생각이 들었다. 토큰은 SecureStore 에 들어있지만 사용할 수 없는 토큰이기 때문에 로그인을 다시 해야하는데, 그저 토큰 유무로만 판단하고 서버에 요청이 넘어가지는 문제를 발견하게 됐다. 내 프로젝트에서 로그인 상태를 판단하는 아키텍쳐는 권한에 대한 인가를 서버에 요청을 할 때 SecureStore에 저장된 Access token을 가져와서 서버로 날려주면 미들웨어가 검증을 하고 통과되면 성공 상태코드를 돌려주고 그렇지 않으면(토큰이 만료된 상태라면) 401 상태코드를 보내주는 구조이다. 

 

문제 해결 방법

내가 생각한 해결방안은 인터셉터에서 401코드를 받으면 SecureStore에 저장된 토큰을 지우는 방식으로 문제해결 하기로 생각했다. 그렇게 되면 내 프로젝트에서 토큰의 유무로만 판단하는 로직을 유지한채로 편하게 프로젝트를 유지보수 할 수 있을 것 같다고 생각했기 때문이다.

 

하지만 토큰 검증을 언제로 정해야할지 의문이다 넥슨이나 유투브같은 웹사이트를 보면 로그인 상태가 바로바로 체크가 되는데 어떤식으로 하는지 모르겠다. 나처럼 토큰방식이 아닌 세션방식이라 더 깔끔하게 되는건가? 하는 여러 생각을 해보는 중이다. 

 

처음 나오는 화면에서 먼저 받고 화면이 전환될때마다 해줘야할지 잘 모르겠다. 아니면 useEffect를 사용해 배열안에 state를 추가하고 일정시간마다 요청을 보내서 확인을 하는 코드를 사용해야하나?

 

==> 아무리 생각해도 내가 정확하게 알 수 없는 영역이라 ChatGpt의 도움을 받았다. 앱을 처음 켰을 때 or 새로고침 시 한번 체크하는 방향으로 문제를 해결하는 것이 좋을 것 같다. 일단 앱의 제일 처음 밑바탕이 되는 컴포넌트에 SecureStore에서 토큰이 있다면 서버에서 인가를 내주는 미들웨어에 접근해 사용할 수 있는 토큰이라면 유지하고 그렇지 않으면 SecureStore에서 토큰을 삭제하는 구조로 만들어야겠다고 생각했다. 엔트리는 App.tsx이지만 expo-router가 app/_layout.tsx를 루트로 잡아 트리 전체를 구성하기 때문에 그부분의 AppProviders에 가서 토큰을 검사하고 유지/삭제하는 기능을 만들기로 결정했다.

==> 찾아보니 _layout.tsx는 화면구조, 네비게이션 역할을 맡고 AppProviders에서 전역상태,테마,인증 담당 역할을 맡는다고 한다. 그래서 AppProviders.tsx 파일에서 코드를 짜기로 결정했다.

==> 생각해보니 인터셉터에서 못쓰는 토큰을 삭제해주고,앱 시작시 AppProviders에서 토큰인증을 한번 거친다음, StateProvider.tsx 파일을 만들어 전역에 로그인 상태를 공유하는것이 효율적일 것 같아서 이렇게 진행했다!

 

 

 

 

 

 

문제 해결

- 결론적으로 인터셉터쪽에서 검사를 진행해 저장된 토큰을 삭제해주기 때문에 토큰으로 로그아웃 여부를 체크해도 되게 설정이 되었다.

- 앱을 재시작해도 사용할 수 없는 토큰을 계속 가지고 있던 문제점을 해결했다 (이제 앱 실행과 동시에 사용 할 수 없는 토큰은 삭제되기 때문에 front에서 토큰 유무로 검사를 해도 없는 상태니 로그아웃 상태일 것)

 

- 로그아웃 버튼 => 로그인 버튼으로 보임