221227 항해99 51일차 axios interceptor

로그인 된 상태에서만 요청할 수 있는 데이터들이 있는데, 이를 인증하기 위해서 헤더에 토큰 값을 담아보내야했다.
매번 헤더를 작성하긴 귀찮으니, interceptor를 활용해 요청 시 자동으로 헤더 값을 넣어주도록 설정했다.

반복되는 코드를 방지하기 위해 팀원분이 설정해주신 커스텀 인스턴스다!

const api = axios.create({
  baseURL: process.env.REACT_APP_API_ENDPOINT,
  headers: {
    "content-type": "application/json;charset=UTF-8",
    "Access-Control-Allow-Origin": "*",
    accept: "application/json,",
    withCredentials: true,
  },
});

api에 interceptor를 설정해 요청할 땐 토큰 값을 함께 넘겨주고, accesstoken이 만료되어 새로 발급한 값이 넘어왔을땐 로컬 스토리지에 토큰을 재설정하도록 했다.

api.interceptors.request.use(function (config) {
  const accessToken = localStorage.getItem("accessToken");
  const refreshToken = localStorage.getItem("refreshToken");

  config.headers.accesstoken = `${accessToken}`;
  config.headers.refreshtoken = `${refreshToken}`;

  return config;
});

api.interceptors.response.use(function (config) {
  const accessToken = localStorage.getItem("accessToken");

  if (!accessToken) {
    const newAccessToken = config.headers.accesstoken;
    localStorage.setItem("accessToken", newAccessToken);
  }

  return config;
});

자세한 코드는 여기로,,

사실 에러 처리도 해주어야한다. 실제 서비스가 아닌 미니 프로젝트이니 에러 처리는 생략,,

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

참조