[RFC] 토큰 재발급 실패시 에러 헨들링

[1yoouoo]

@esubine @taegyun1995

🙋‍♂️ Suggest

현재 status code 401 && status message 'INVALID TOKEN' 인 경우에 토큰 재발급이 실행돼요

하지만 토큰 재발급에 실패했을때 역시 401 INVALID TOKEN을 에러메세지를 던져줘서 다시 토큰 재발급을 실행해요 (반복)

백앤드에서 토큰 재발급이 실패했을 때는 다른 에러메세지를 보내주면 토큰 재발급에 실패했다고 판단하여 로그인 페이지로 보내든 다른 에러처리가 가능할 거 같아요

❗ When to follow this process

const getNewAccessToken = async (error) => {
  try {
    const { response } = error;

    // 큐에 밀어 넣기
    const retryOriginalRequest = new Promise((resolve) => {
      addSubscriber((token: string) => {
        response!.config.headers.Authorization = `Bearer ${token}`;
        resolve(axios(response!.config));
      });
    });
    if (!fetchingToken) {
      fetchingToken = true;

      const { refreshToken } = await API.getRefreshToken();
      const token = getAccessToken();
      const res = await API.getNewAccessToken({
        refreshToken,
        accessToken: token,
      });
      if (!isServer) {
        setAccessToken(res.data.accessToken);
      }
      await API.setCookie({ name: 'accessToken', value: res.data.accessToken });
      // 새로운 토큰을 발급받으면 요청 재시도
      onAccessTokenFetched(res.data.accessToken);
    }

    return retryOriginalRequest;
  } catch (err) {
    // 그래도 에러나면 쿠키&큐 비우고 로그인페이지로 이동
    await API.deleteAllCookies();
    subscribers = [];
    window.location.href = '/login';

    return Promise.reject(err);
  } finally {
    fetchingToken = false;
  }
};

const setInterceptors = (instance: AxiosInstance) => {
  instance.interceptors.response.use(
    (response) => response,
    (error) => {
      if (error.response?.data.code === 'INVALID_TOKEN') {          <<<<<< 이 부분이 문제
        return getNewAccessToken(error);
      }
      return Promise.reject(error);
    }
  );

  instance.interceptors.request.use(
    (config) => {
      if (config.url !== '/publish/access-token') {
        const token = getAccessToken();

        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
      }
      return config;
    },
    (error: AxiosError) => Promise.reject(error)
  );
};

👏 What to expect

코드를 크게 수정하지않고 정책상으로 에러를 해결할 수 있어요