Next/server를 이용한 로그아웃 api작성

서론

저는 next.js 프로젝트를 진행할 때 다음과 같은 방식을 사용합니다.

1. (backend) 백엔드측 코드에서 jwt를 활용한 login api 구현
2. (backend) 로그인시 자동으로 cookie에 accessToken/refreshToken을 세팅
3. (backend) front middleware에서 토큰 만료에 대한 검증을 위해 검증용 API 작성

다음과 같은 방법을 사용하면 frontend 입장에서는 로그인시 발급되는 토큰을 가지고
middleware를 통하여 토큰검증을 하게됩니다. 미들웨어 참고

따라서 로그아웃을 할 때에는 frontend 측에서 cookie에 세팅된 토큰만 초기화 해주면 되는 상황이됩니다.

로그아웃

// app/api/logout/route.ts

import { NextResponse } from "next/server";

export async function POST() {
  const response = NextResponse.json({ success: true });
  console.log("logout");
  response.cookies.set("accessToken", "", { maxAge: 0 });
  response.cookies.set("refreshToken", "", { maxAge: 0 });
  return response;
}

response의 cookie값을 초기화 시켜주는게 다인 간단한 api입니다.

프론트에서는 다음과같이 함수를 만들어 처리했습니다.

서버에서 작업이 이루어지기에 promise처리를 위해 async/await으로 묶어 비동기 처리를 해주면 됩니다.

	// fetch를 통한 api호출 
  async function deleteTokens() {
    const res = await fetch("/api/logout", {
      method: "POST",
    });
    if (!res.ok) {
      throw new Error("Failed to logout");
    }
  }
	// 로그아웃 버튼에 할당할 onClick 함수
  const onClickLogout = async () => {
    try {
      await deleteTokens();
      logout(); // 여기는 단순히 스토리지에 저장된 기본정보들을 지우는 용도
    } catch (error) {
      console.error(error);
    }
  };