Large Rainbow Pointer
[Next.js / Zustand] 로그인 확인 및 로그아웃 구현
💜 프로젝트 구현2024. 7. 15. 13:13[Next.js / Zustand] 로그인 확인 및 로그아웃 구현

시작하며...이번 프로젝트에서 상태 관리 라이브러리인 Zustand 를 사용하여 로그인 여부를 확인하고, 로그아웃을 구현하게 되어 해당 글을 작성하게 되었다. Zustand 스토어 작성일단 다음과 같은 플로우를 생각해 보았다.로그인 → 토큰 쿠키에 저장 → 로그인 여부 O쿠키에 토큰 있음 → 로그인 여부 O쿠키에 토큰 없음 → 로그인 여부 X로그아웃 → 쿠키에 토큰 만료 useAuthStore.tsx일단 상태와 메서드 5개를 만들었다.user - 로그인하면서 저장할 유저 정보 상태saveUser - 유저 정보 저장하는 메서드isLogin - 로그인 여부 나타내는 boolean 상태checkLogin - 로그인 여부 확인하는 메서드logout - 로그아웃 처리하는 메서드 saveUser 로 유저 정보와 로..

image
loading