[Next13 + TypeScript ] 로그인&로그아웃 구현 + accesstoken 쿠키에 넣고 삭제하기

[Next13 + TypeScript ] API, JWT(accesstoken) 사용하여 로그인&로그아웃 구현하기
위의 포스트에서 accesstoken 을 쿠키에 넣어주고 삭제하는 방법을 작성하지 않았길래 .. 추가해본다.

import { setCookie } from 'cookies-next';

Next.js 13에서는 cookies-next 에서 setCookie 를 import 해야 쿠키 설정이 가능하다.

보다 자세한 코드는 상단 링크를 참고하고

여기선 쿠키부분의 코드만 다루겠다.

const handleSignin = async (): Promise<void> => {
    if (!email.includes('@') || password.length < 4) {
    }
    try {
      const response = await axios.post(
        '/api/v1/user/login',
        {
          email,
          password,
        }
      );

      const accessToken = response.data.data.accessToken;
      localStorage.setItem('accessToken', accessToken);
      setCookie('accessToken', accessToken);
      router.push('/');
      window.location.replace('/');
      console.log(response);
    } catch (error) {
      console.log('실패하였습니다', error);
      showModal();
    }
    return;
  };

로그인에 성공했을 시,

setCookie('accessToken', accessToken);

를 사용하여 accessToken를 쿠키에 저장한다.

마찬가지로 deleteCookie 를 import 해주어야 쿠기 삭제가 가능하다.

import { deleteCookie } from 'cookies-next';

const handleLogout = () => {
  const accessToken = getAccessTokenFromLocalStorage();
  instance
    .post(
      `/api/v1/user/logout`,
      {},
      {
        // 빈 객체를 요청 데이터로 전달
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      }
    )
    .then((response) => {
      console.log('로그아웃성공', response);
      localStorage.removeItem('accessToken');
      deleteCookie('accessToken');
      window.location.reload();
    })
    .catch((error) => {
      console.log(error, '실패하였습니다');
      localStorage.removeItem('accessToken');
      deleteCookie('accessToken');
    });
};

로그아웃 성공 시,

deleteCookie('accessToken');

를 사용하여 accessToken를 쿠키에서 삭제한다.