Axios Interceptors로 Logout 액션을 Dispatch하는 방법

ReactJS Axios Interceptors: 로그아웃 액션을 어떻게 디스패치하는가

Axios를 사용하는 ReactJS 애플리케이션에서, 인터셉터는 HTTP 요청과 응답을 수정하고 처리하는 중요한 역할을 합니다. 특히, 상태 코드가 401이나 403인 경우 로그아웃 액션을 디스패치하는 방법에 중점을 둘 것입니다.

코드 구조 이해하기

우선, 제공된 코드 스니펫을 분석하겠습니다. 이 코드는 기본 URL과 타임아웃 값을 설정한 Axios 인스턴스를 나타냅니다. 또한 요청과 응답에 대한 인터셉터도 포함하고 있습니다.

import axios from "axios";
import { Storage } from "./utils/storage";

const instance = axios.create({
  baseURL: process.env.API_URL,
  timeout: 3000
});

const onRequestSuccess = config => {
  // ... 요청 성공 로직
  return config;
};

const onRequestFail = error => {
  // ... 요청 오류 로직
  return Promise.reject(error);
};

instance.interceptors.request.use(onRequestSuccess, onRequestFail);

const onResponseSuccess = response => {
  // ... 응답 성공 로직
  return response;
};

const onResponseFail = error => {
  // ... 응답 오류 로직
  const status = error.status || error.response.status;
  if (status === 403 || status === 401) {
    // 로그아웃 액션 디스패치
  }
  return Promise.reject(error);
};

instance.interceptors.response.use(onResponseSuccess, onResponseFail);

export default instance;

로그아웃 액션 디스패치하기

상태 코드가 401이나 403인 경우 로그아웃 액션을 디스패치하려면 Redux 스토어에 액세스할 수 있어야 합니다. 제공된 코드에서는 store 객체를 사용하여 스토어에 접근합니다. 그러나 특정한 사용 사례에서는 별도로 axios를 가져오고 별도의 인스턴스를 만드는 대신 instance 객체를 사용하고자 하는 것으로 보입니다.

instance 객체와 Redux 스토어를 사용하여 로그아웃 액션을 디스패치하는 방법의 예시입니다:

import instance from "../../../axios";
import { Provider } from "../../../constants/api";

// ...

const { dispatch } = store;

const setupAxiosInterceptors = onUnauthenticated => {
  // 요청 인터셉트 로직...

  // 응답 인터셉트 로직...
  const onResponseFail = error => {
    // ... 응답 오류 로직
    const status = error.status || error.response.status;
    if (status === 403 || status === 401) {
      onUnauthenticated();
    }
    return Promise.reject(error);
  };

  instance.interceptors.response.use(onResponseSuccess, onResponseFail);
};

setupAxiosInterceptors(() => {
  dispatch(authLogout());
});

export const Provider = {
  // API 제공자 함수들...
};

결론

이 블로그 포스트에서는 ReactJS에서 Axios 인터셉터를 사용하여 로그아웃 액션을 디스패치하는 방법을 알아보았습니다. 응답을 인터셉트하고 특정한 상태 코드를 확인함으로써 필요한 경우 로그아웃 액션을 실행할 수 있습니다. 액션을 올바르게 디스패치하기 위해 Redux 스토어에 액세스할 수 있는지 확인하는 것을 잊지 마세요.

이러한 메커니즘을 구현함으로써, ReactJS 애플리케이션에서 권한 없는 요청을 우아하게 처리하고 사용자 경험을 원활하게 제공할 수 있습니다.

참고 자료 : 

reactjs