로그인 안했을 때
로그인 했을 때
<aside>
</aside>
로그인을 여부에 따라 헤더에 다른 UI를 보여주어야하며, 로그인 된 상태라면 유저 정보를 확인할 수 있어야 한다.
로그인 안했을 때
로그인 했을 때
또한 인증 정보에 따라서, 로그인이 필요한 페이지에 대한 접근을 막아야한다.
이를 위해서는 페이지 전반에 걸쳐 로그인 여부를 알아야하므로, 전역 상태로 관리할 필요성을 느껴 zustand를 도입하게 되었다. zustand store에서 로그인여부와 로그인된 유저 정보(아이디, 로그인 방식)을 저장하도록 했다.
이 인증 정보를 전역 상태에 저장하려면 유저 정보 조회 API를 날려서 정보를 받아와야했다.
이 API를 어디에서 날려야할까 고민하다가, 이 데이터를 사용하는 쪽인 Header에서 요청해야하지 않을까 싶었다. 따라서 유저 정보를 조회하고 401에러가 뜬다면 인증 정보 상태를 clear하고, 정상적으로 응답한다면 상태에 저장해주는 커스텀훅을 만들어서 Header 내에서 사용했다.
<aside>
이 과정에서, 나는 프론트지만 유저 정보 조회 API를 직접 구현해보는 경험을 가졌다! 서버 API가 어떤식으로 만들어지는지 이해할 수 있어서 좋았고, 이후에 개발을 하면서 서버 요청 응답에 문제가 있을 때 직접 수정할 수 있어서 좋았다.
</aside>
다음으로는 인증이 필요한 페이지에 로그인 없이 접속했을 경우 로그인 페이지로 이동시켜주는 작업이 필요했다. 이는 Tanstack router를 이용해서 생각했던거보다 아주 깔끔하고 간편하게 구현할 수 있었다.
Tanstack router에서 파일기반 라우팅을 이용하고있는데, 여기서 pathless route라는 개념을 사용할 수 있다. 실제로 그 경로가 존재하지는 않지만 다른 경로를 래핑하기 위한 레이아웃 라우트라고 볼 수 있다.
그래서 _authenticated 이라는 가상 라우트를 하나만들고, 이 안에서 내부적으로 인증 여부를 확인하는 과정을 거쳤다.