🍊JWT 토큰 만료 처리하기 / axios interceptor를 커스텀 훅으로 사용하기

이번 포스트에서는 JWT를 사용해서 토큰 만료를 판단하고 처리하는 과정에서 겪은 고민과Axios Interceptor에서 React Hook 및 Custom Hook을 사용하기 위해 고민했던 과정을 담았습니다.

해당 프로젝트에서는 주어진 백엔드 api를 이용해서 유저기능(로그인, 회원가입, 유저정보수정, 로그아웃, 회원탈퇴)을 구현하였습니다. 인증에서는 JWT(Json Web Token)을 사용하도록 되어 있었습니다.

때문에 백엔드 개발자와 소통할 수 없고, 서버의 내부 구현상황을 알 수 없는 상황에서 몇가지 문제가 발생하였습니다.

🚀 토큰을 언제 갱신해야 하나요?

JWT에는 만료기한이 있습니다. 수명이 무한한 토큰은 탈취시 보안에 큰 위협이 되기때문에 대부분의 토큰은 만료기한 expiration date를 payload에 명시하고 있는데요. 문제는 이번 프로젝트에서 전달받은 토큰에는 exp항목이 명시되어있지 않았다는 점입니다.

// 디코딩된 Jwt의 payload
{
  "user": {
    "_id": "679252*********8f82",
    "email": "l***u@gmail.com"
  },
  "iat": 17******7 // 
}

토큰이 어떤 정보를 담는지 보고 싶다면 https://jwt.io/ 를 방문하거나 jwt-decode와 같은 라이브러리를 사용해서 간단히 디코딩해볼수 있습니다.

다시 돌아와서, 원래는 refresh token, access token이 주어지거나 하나의 토큰의 만료기간이 되면 다시 새로운 토큰을 발급받아야 하지만 주어진 토큰에서는 만료기간 정보를 확인할 수 없었습니다.

1. 만료시간이 맞는지 검사한다.

로그인 이후에 확인한 토큰의 iat 키가 과거인지 미래인지 판단해서 과거라면 발급시간이 맞을거고, 미래라면 만료시간으로 활용하고 있을 가능성이있습니다.

따라서 확인결과 iat는 과거시간으로 올바른 발급시간으로 사용된것이 맞았습니다.

iat는 unix timestamp 형식으로 되어 있습니다.

2. axios 인터셉터를 사용해서 401응답이 올경우 프론트에서 처리한다.

어떤 요청에서 유효한 인증 자격 증명이 없어 발생되는 statusCode 401 응답오류가 올 경우 두가지 경우의 수로 나누어서 판단할 수 있습니다.

1️⃣ 요청 헤더에 JWT가 있음에도 불구하고 401에러가 발생한다면 만료되었거나 올바르지 않은 토큰인 경우이다.

따라서 해당 경우에는 프론트에서 관리중인 유저상태를 초기화하고, 쿠키에 보관된 JWT삭제합니다. 이후 홈으로 이동하며 유저에게는 경고창 혹은 알람으로 사용자 정보가 만료되었음을 적절히 알려줘야 합니다.

2️⃣ 요청 헤더에 JWT가 없다면 로그인을 하지 않고서 최초접근했을 가능성이 있는 경우입니다.

현재 프로젝트에서 JWT를 헤더에 포함시켜야 하는 요청이 있는 페이지에 로그아웃상태에서의 접근을 막아두어서 이 경우는 희박하지만, 일단 해당 상황이 발생하면 로그인이 필요하다는 알림과 함께 로그인 페이지로 이동시켜야 합니다.

🚀 axios intercepter로 401응답 처리하기

Axios 인터셉터란?
Axios는 JavaScript에서 HTTP 요청을 보내기 위한 라이브러리입니다. Axios의 유용한 기능 중 하나로 인터셉터가 있습니다.
인터셉터를 사용하면 요청이나 응답을 가로채서 원하는 로직을 수행할 수 있습니다. 예를 들면, 모든 요청에 토큰을 추가하거나, 응답 로깅, 오류 처리 등을 할 수 있습니다.

해당 프로젝트에서도 인터셉터를 활용해서 헤더에 토큰을 싣거나, 응답에러 상황에 따른 적절한 에러를 핸들링하고 있었습니다.
이제 401에러가 난 경우를 위 요구사항대로 완성한 401에러 발생시 호출되는 핸들러는 다음과 같습니다.
그러나 이 코드는 동작하지 않습니다.

const handle401Error = originalRequest => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  // iat가 토큰 발급시간으로 사용되는 것이 맞다고 확인됨.
  // 만료시간을 수동으로 확인한다.
  // 1. 에러가 난 요청에 jwt가 있었는지 확인
  const hasToken = Boolean(originalRequest.header['Authorization']);

  if (hasToken) {
    // 있었으면 토큰 만료 오류로 판단. -> 쿠키와 유저 상태를 지우고 로그인 페이지로 이동
    dispatch(deleteUser()); // 리덕스의 유저정보 삭제
    removeCookie('jwt'); // 토큰 삭제
    alert('사용자 정보가 만료되었습니다.로그인페이지로 이동합니다.');
    navigate(PATH.auth);
  } else {
    // 없었으면 토큰 없이 요청보낸 것이므로 -> 로그인 페이지로 이동
    alert('사용자 정보를 찾을 수 없습니다. 로그인 페이지로 이동합니다.');
    navigate(PATH.auth);
  }
};

useDispatch, useNavigate과 같은 리액트 훅은 함수 컴포넌트 혹은 커스텀 훅 내부에서만 호출할 수 있기 때문입니다.

따라서 Axios Interceptor자체를 커스텀 훅으로 만들어 내부에서 Redux상태 변경을 위한 훅을 사용할 수 있도록 하겠습니다.
또한 해당 프로젝트에서는 제공된 데브서버 뿐 아니라 Open Api, supabase등 다양한 서버 도메인을 사용하고 있습니다.
때문에 커스텀훅으로 만들어 두면 각 인스턴스마다 API 요청과 응답을 반복적인 코드없이 간편하게 제어할 수 있을 것이라 생각했습니다.

useAxiosInterceptor 커스텀 훅

const useAxiosInterceptor = instance => {
  const dispatch = useDispatch();

  const onRequest = config => {
    const jwt = getCookie('jwt');
    if (jwt) {
      config.headers.Authorization = `bearer ${jwt}`;
    }
    return config;
  };

  const onErrorRequest = error => {
    return Promise.reject(error);
  };

  const onError = (status, message, errorDetail) => {
    const error = { status, message, errorDetail };
    throw error;
  };

  const handle401Error = async originalRequest => {
    // iat가 토큰 발급시간으로 사용되는 것이 맞다고 확인됨.
    // 만료시간을 수동으로 확인한다.
    // 1. 에러가 난 요청에 jwt가 있었는지 확인
    const hasToken = originalRequest.headers['Authorization'].split(' ').at(1);
    if (hasToken) {
      // 있었으면 토큰 만료 오류로 판단. -> 쿠키와 유저 상태를 지우고 로그인 페이지로 이동
      alert('사용자 정보가 만료되었습니다.홈으로 이동합니다.');
      await dispatch(deleteUser());
      removeCookie('jwt');
      window.location.href = PATH.root;
    } else {
      // 없었으면 토큰 없이 요청보낸 것이므로 -> 로그인 페이지로 이동
      alert('사용자 정보를 찾을 수 없습니다. 로그인 페이지로 이동합니다.');
      await dispatch(deleteUser());
      removeCookie('jwt');
      window.location.href = PATH.auth;
    }
  };
  
  const onResponse = response => response;

  const onErrorResponse = error => {
    if (axios.isAxiosError(error)) {
      const originalRequest = error.config;
      const { method, url } = originalRequest;
      const { data: message, status: statusCode, statusText } = error.response;

   
      console.log(
        `[API] ${method.toUpperCase()} ${url} | ERROR ${statusCode} ${statusText} | ${message}`,
      );

      switch (statusCode) {
        case 400: {
          onError(statusCode, '잘못된 요청입니다.', message);
          break;
        }
        case 401: {
          handle401Error(originalRequest);
          break;
        }
        case 403: {
          onError(statusCode, '권한이 없습니다.', message);
          break;
        }
        case 404: {
          onError(statusCode, '찾을 수 없는 페이지 입니다.', message);
          break;
        }
        case 500: {
          onError(statusCode, '서버 오류입니다.', message);
          break;
        }
        default: {
          onError(statusCode, '에러가 발생했습니다.', message);
        }
      }
    } else if (error && error.name === 'TimeoutError') {
      console.log(`[API] | Timeout ERROR ${error.toString()}`);
      onError(0, '요청시간이 초과되었습니다.', '');
    } else {
      console.log(`[API] | ERROR ${error.toString()}`);
      onError(0, '에러가 발생했습니다.', '');
    }
    return Promise.reject(error);
  };

  // interceptor 추가
  const setupInterceptors = () => {
    const requestInterceptor = instance.interceptors.request.use(onRequest, onErrorRequest);
    const responseInterceptor = instance.interceptors.response.use(onResponse, onErrorResponse);

    return { requestInterceptor, responseInterceptor };
  };

  // interceptor 제거
  const ejectInterceptors = (requestInterceptor, responseInterceptor) => {
    instance.interceptors.request.eject(requestInterceptor);
    instance.interceptors.response.eject(responseInterceptor);
  };

  useEffect(() => {
    const { requestInterceptor, responseInterceptor } = setupInterceptors();

    return () => {
      ejectInterceptors(requestInterceptor, responseInterceptor);
    };
  }, []);
};
export default useAxiosInterceptor;

📚 axios interceptor

• instance.interceptors.request.use(요청 전달 전 작업 , 요청 오류시 작업)
• instance.interceptors.response.use(200번대 상태코드시 트리거되는 작업, 응답 오류가 있을때 작업 )
• instance.interceptors.request.eject() : 인터셉터 제거

custom hook 사용하기

function App() {
  useAxiosInterceptor(devAPI);
  return <RouterProvider router={router} />;
}

export default App;

앱의 최상단에서 위치시켜주었습니다. 어쨌든 useAxiosInterceptor가 'react-router'외부에서 호출되고 있기때문에 기존의 useNavigator와 같은 훅은 사용할 수 없습니다.

👉따라서 window.location.href로 이동시켜주어야 합니다. 다만 useDispatch가 redux-persist와 함께 사용되어 비동기적으로 상태를 업데이트 하기 때문에 async-await 구문을 사용해서 상태가 완전히 업데이트 되고 난뒤 window.location.href로 리디렉션이 이루어져야 합니다.