[Next.js / Zustand] 로그인 확인 및 로그아웃 구현

시작하며...

이번 프로젝트에서 상태 관리 라이브러리인 Zustand 를 사용하여 로그인 여부를 확인하고, 로그아웃을 구현하게 되어 해당 글을 작성하게 되었다.

 

Zustand 스토어 작성

일단 다음과 같은 플로우를 생각해 보았다.

• 로그인 → 토큰 쿠키에 저장 → 로그인 여부 O
• 쿠키에 토큰 있음 → 로그인 여부 O
• 쿠키에 토큰 없음 → 로그인 여부 X
• 로그아웃 → 쿠키에 토큰 만료

 

useAuthStore.tsx

일단 상태와 메서드 5개를 만들었다.

• user - 로그인하면서 저장할 유저 정보 상태
• saveUser - 유저 정보 저장하는 메서드
• isLogin - 로그인 여부 나타내는 boolean 상태
• checkLogin - 로그인 여부 확인하는 메서드
• logout - 로그아웃 처리하는 메서드

 

saveUser 로 유저 정보와 로그인한 상태를 저장한다.

checkLogin 으로 토큰이 있으면 로그인 상태를 true 로, 토큰이 없으면 유저 정보를 null 바꾸고 로그인 상태도 false 로 변경한다.

logout 은 쿠키에 있는 토큰의 만료기간을 만료시키고, 유저 정보를 null 바꾸고 로그인 상태도 false 로 변경한다.

import { create } from 'zustand';
import { getCookie, deleteCookie } from '@/utils/cookieUtil';
import { UserResponse } from '@/types/apiType';

interface userInfoProps {
  user: UserResponse | null; // 유저 정보
  saveUser: (user: UserResponse) => void; // 유저 정보 저장
  isLogin: boolean; // 로그인 여부
  checkLogin: () => void; // 로그인 여부 확인 함수
  logout: () => void; // 로그아웃
}

export const useUserStore = create<userInfoProps>((set) => {
  return {
    user: null,
    isLogin: false,
    saveUser: (user) => {
      set({ user, isLogin: true });
    },
    checkLogin: () => {
      const accessToken = getCookie('accessToken');
      const refreshToken = getCookie('refreshToken');
      if (accessToken && refreshToken) {
        set({ isLogin: true });
      } else {
        set({ user: null, isLogin: false });
      }
    },
    logout: () => {
      deleteCookie('accessToken');
      deleteCookie('refreshToken');
      set({ user: null, isLogin: false });
    },
  };
});

 

Zustand 사용하여 구현하기

로그인

로그인하면서 서버에서 받은 access, refresh 토큰을 쿠키에 저장을 하고, 위에서 만든 saveUser 를 사용하여 유저 정보를 저장하고 isLogin 값을 true 로 만들었다.

saveUser(response.data?.user);

 

로그인 여부 확인

탑 네비게이션 바 컴포넌트에서 사용자의 로그인 여부에 따라 보여주는 내용이 다르기 때문에 로그인 여부 확인해야 한다.

 

그래서 useEffect 를 사용하여 해당 컴포넌트가 새로 마운트 될 때, 위에서 만든 checkLogin 메서드로 로그인 여부를 확인하고 checkLogin 함수를 의존성 배열에 추가하여 해당 함수가 변경될 때 재실행되도록 하였다.

useEffect(() => {
  checkLogin();
}, [checkLogin]);

 

그리고 이제 위에서 만든 isLogin 값을 가져와 로그인 여부에 따라 다른 내용을 렌더링 하였다.

<div>
  {isLogin ? (
    // 로그인 한 유저에게 보여주는 내용
  ) : (
    // 로그인 안 한 유저에게 보여주는 내용
  )}
</div>

 

로그아웃

간단하게 위에서 만든 logout 메서드를 사용하여 로그아웃을 구현하면 된다.

const handleClickLogout = () => {
  logout();
  handleClose();
  router.push('/');
};

 

결과

그러면 아래 영상처럼 로그인을 하면 왼쪽에 로그인에서 프로필 아이콘으로 바뀌는 것을 확인할 수 있고, 로그아웃을 하면 쿠키에 있는 내용이 사라지는 것을 확인할 수 있다

 

결과

 

마치며...

상태 관리 라이브러리인 Zustand 를 사용하여 로그인 여부를 확인하고 로그아웃을 구현해보았다.

 

추가적으로 여기서 유저의 정보도 저장하였는데 이를 새로고침해도 계속 값을 사용할 수 있도록 persist 를 적용해보았는데 해당 구현에 관련된 글은 아래 링크에서 확인할 수 있다! https://jjang-j.tistory.com/124

[Next.js] Zustand persist 사용하기 (feat. Hydration 에러 해결)