Next.js에서 403 에러 처리하기(특정페이지로 이동시키기)

미션

프레임워크로 넥스트를 사용하고 있는 프로젝트의 개인정보 변경페이지에서 유효시간 만료 시(403에러) 비밀번호 확인 페이지로 이동시켜라

 

방식

1) fetch 파일에서 403에러가 발생하면 window 이벤트를 발생시키고

2) 비밀번호 확인 컴포넌트에서 이벤트에 따른 등록 함수를 실행시키도록 한다(비밀번호 확인 페이지)

 

 

 

먼저 fetch에 인증과 공통 처리를 얹어준 wrapper 파일에 403 에러 처리를 해준다

    if (
      res.status === 403 &&
      typeof window !== 'undefined' &&
      window.location.pathname.startsWith('/profile-update/lists')
    ) {
      // profile-auth-expired라는 이벤트 객체 만들어 window에 발생시킴
      window.dispatchEvent(new CustomEvent('profile-auth-expired'));
    }

 

 

 

그리고 라우터 이동을 할 수 있는 비밀번호 확인 컴포넌트에서 이벤트 등록 및 실행함수를 정의한다

useEffect(() => {
  // ① 이벤트가 발생했을 때 실행할 함수 정의
  const onExpired = () => {
    setAuth(false);
    router.replace('/profile-update');
  };

  // ② 구독 시작(profile-auth-expired 이벤트에 onExpired 등록)
  window.addEventListener('profile-auth-expired', onExpired);

  // ③ 이 컴포넌트가 사라질 때 리스너 지우기
  return () => window.removeEventListener('profile-auth-expired', onExpired);
}, [router, setAuth]);

 

 

 

이런 방식을 사용하는 이유?

403을 감지하는건 fetch 파일인데,

정작 해야할 일은 1) 상태를 변경하고 2) 라우터 이동을 시키는 것이다

-> 이 일들은 컴포넌트 안에서 가능하며 ts파일인 fetch에서는 불가능하다

그래서 전역객체인 window를 사용해 이벤트 객체를 만들어 두 곳을 연결한다