[Token] 인터셉터

230429

오늘은 JWT의 AccessToken과 RefreshToken에 이어서 interseptor에 대한 개념을 알아보겠습니다.

앞선 글에서 우리가 홈페이지를 이용하다보면 우리만의 정보로 이용해야 하는 것들이 존재한다는 것을 알 수 있었습니다.

예를들어, 영화 끝까지간다에서 이선균이 조진웅에게서 얻은 돼지도장열쇠로만 금고에 출입할 수 있었던 것 처럼요.

하지만 이러한 토큰을 API마다 얻는 작업은 API를 만들 때마다

async function BlaBla() {

const Token = getToken()
try{
const {data} = await defaultAxios.post(`end포인트`, {params})
}
}catch(error){
	console.log("Error:",  error)
}

Token을 받아와야 하는 번거로움이 존재했다.defaultAxios를 만들 때 부터 token에 대한 모듈화를 진행해 놓는다면, token을 매번 적어놓지 않아도 되어 효율적이다.

이를 도와줄 수 있는 것이 interceptor이다.

Axios Interceptor란?

• axios의 request와 response를 가로채어 필요한 기능을 추가할 수 있게 해주는 것
• axios의 return type이 Promise인 점을 이용해 특정 요청 전에 부가 작업을 할 수 있게 해주는 라이브러리

즉 이를 통해서 token을 axios 실행 전에 담아 보낼 수 있게 가로챈다! 는 의미라고 생각하면 된다.

function defaultInstance(req?: any) {
  const instance = axios.create({
    baseURL: Config.API_URL,
    headers: {
      "Content-Type": "application/JSON;charset=utf-8",
    },
  });

  // 인터셉터를 사용하여 자동으로 accessToken을 header에 추가하고, 만료되면 refreshToken을 헤더에 추가.
  instance.interceptors.request.use(async (config) => {
    const token = await getAccessToken(req);
    if (token) {
      config.headers["X-ACCESS-TOKEN"] = token;
    }

    const refreshToken = await getRefreshToken(req);
    if (refreshToken) {
      config.headers["X-REFRESH-TOKEN"] = refreshToken;
    }
    return config;
  });

  // 응답 인터셉터 추가: 액세스 토큰이 만료되면 리프레시 토큰을 사용하여 새 액세스 토큰을 얻어옴
  instance.interceptors.response.use(
    (response) => {
      return response;
    },
    async (error) => {
      const originalRequest = error.config;
      if (error.response.status === 400 || error.response.status === 401) {
        const refreshToken = await getRefreshToken();
        if (refreshToken) {
          const newAccessToken = await getNewAccessToken(refreshToken);
          if (newAccessToken) {
            originalRequest.headers["X-ACCESS-TOKEN"] = newAccessToken;
            return instance(originalRequest);
          }
        }
      }
      return Promise.reject(error);
    }
  );

  return instance;
}

다음 시간에는 async await, 비동기에 대해서 다시 한 번 공부해보겠다.