[React/axios] 토큰 관리(refreshToken, accessToken) interceptors

프로젝트 도중에 refreshToken과 accessToken을 어떻게 관리하면 좋을지에 대해서 계속 생각을 해보았다. 

다양한 방법을 찾았었는데 

우선 내가 시간을 정해서 setTimeout으로 정해진 시간이 끝나면 다시 서버에 요청해서 accesstoken을 발급 받는 방법을 봤었는데

처음엔 그렇게 할까? 생각하다가 조금 더 찾아보자는 마음으로 찾기 시작했다. 

우선 나는 편하게 쓰기위해서 

공통 api를 따로 빼놓는 편인데

그 부분에서 같이 헤더를 보낼 생각을 하다가 더 찾아보니 interceptors라는게 있어서 이용해보기로 했다. 

 

const Apis = axios.create({
  baseURL: "http://URL",
});

이런식으로 기본적으로 베이스가 될 url을 잡아주고 

토큰을 매번 주소로 연결할 때 마다 확인하는 코드를 만들어 주게 되었다. 

또한 지금 가지고 있는 accessToken이 만료가 되어 백엔드에서 에러코드를 보내주면 

다시 interceptors로 가로채서 refreshtoken을 보내주는 식으로 만들었다. 

//요청시 AccessToken 계속 보내주기
Apis.interceptors.request.use(function (config) {
  const token = localStorage.getItem("token");

  if (!token) {
    config.headers["accessToken"] = null;
    config.headers["refreshToken"] = null;
    return config;
  }
  if (config.headers && token) {
    const { accessToken, refreshToken } = JSON.parse(token);
    config.headers["Authorization"] = `Bearer ${accessToken}`;
    config.headers["refreshToken"] = `Bearer ${refreshToken}`;
    return config;
  }
});

//AccessToken이 만료됐을때 처리
Apis.interceptors.response.use(
  function (response) {
    return response;
  },
  async function (err) {
    const originalConfig = err.config;

    if (err.response && err.response.status === 401) {
      const refreshToken = originalConfig.headers["refreshToken"];
      try {
        const data = await axios({
          url: `refreshtoken담아 보낼 URL`,
          method: "GET",
          headers: {
            Authorization: refreshToken,
          },
        });
        if (data) {
          localStorage.setItem(
            "token",
            JSON.stringify(data.data, ["accessToken", "refreshToken"])
          );
          return await Apis.request(originalConfig);
        }
      } catch (err) {
        console.log("토큰 갱신 에러");
      }
      return Promise.reject(err);
    }
    return Promise.reject(err);
  }
);
export default Apis;

이부분을 짜다가 중간에 에러가 났던 부분이 계속 axios로 보낼 생각을 안하고 다시 data를 Apis로 보냈더니 무한 로딩이 시작됐다. 

지금 생각해보면 너무 바보같은 생각이었는데

왜냐하면 accesstoken이 만료니까 계속 반복될껀데... 

baseURL이 있으니까 당연히 그걸로 아래도 짜야지 라고 초보적인 실수를 한 것 같다. 

그부분만 빨리 캐치했어도 

엄청 쉬웠을텐데 

아쉽다 아쉬워