2024-01-25 본 캠프 80일차 / 99일차 TIL (리다이렉트 메시지 로직개선, params->cookies)

2024-01-25 본 캠프 80일차 / 99일차 TIL (리다이렉트 메시지 로직개선, params->cookies)

 

 

미들웨어를 통해 페이지 redirect가 발생하였을 때, 사용자에게 알려주는 것이 필요했다.

 

기존에 리다이렉트에 대한 정보를 알려주기 위해서 다음과 같이 주소에 params를 추가해서 리다이렉트 시켰다.

  // 로그인 세션에 따른 조건부 처리
  if (
    !session &&
    (pathname.startsWith("/dashboard") || pathname.startsWith("/metaverse"))
  ) {
    const url = new URL("/signin", request.url);
    url.searchParams.set("message", "login first");
    return NextResponse.redirect(url);
  }

 

해당 방식은 두가지 문제점이 있었다.

1. 오류 정보가 유저에게 직접적으로 노출된다

2. 새로고침시 path는 그대로이기 때문에 오류정보가 남아있다.

 

이 문제들을 개선하기 위해서 cookies를 이용하기로 하였다.

 

미들웨어에서 params를 추가하는 것 대신 cookies를 생성하고 클라이언트에서는 해당 쿠키를 확인 후 삭제하는 방식으로 유저에 메시지를 전달하는 방식이다.

  // 로그인 세션에 따른 조건부 처리
  if (
    !session &&
    (pathname.startsWith("/dashboard") || pathname.startsWith("/metaverse"))
  ) {
    const url = new URL("/signin", request.url);
    const response = NextResponse.redirect(url);
    response.cookies.set("message", "login_first");
    return response;
  }

 

리다이렉트 페이지에서는 쿠키의 메시지를 읽고 처리한 후 해당 쿠키를 삭제한다.

  useEffect(() => {
    const message = getCookie("message");
    if (message) {
      // 메시지로 이벤트 처리
      pathValidation(message);
      // 쿠키 삭제
      document.cookie =
        "message=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
  }, []);

 

쿠키를 사용하여 유저에 오류정보를 직접적으로 노출하지 않으며, 새로고침이 이루어졌을 때 cookies는 이미 삭제되었기 때문에 중복된 오류메시지를 발생시키지 않는다.