axios interceptors 사용하기

브리·2022년 5월 30일
0

axios 러닝가이드를 참고했다 but too simple...!
구글링을 통해 더 알아보았따.

인터셉터

📌 axios 요청을 하고 응답하는 과정을 가로채어 사용자가 원하는 동작을 실행하게 해준다.

나 같은 경우에는 이것을 이용해서 headers 값을 넣어주었다.
원래는 로그인이 성공하면 jwt 토큰 값을 로컬에 저장하고,
그걸 axios.headers.common.Authorization = Bearer ${res.data.result.jwt} 요런식으로 저장해주려고 했는데 새로고침을 해야만 headers 값이 들어갔다.
여쭈어보니 브라우저 단에서의 스토리지와 defaults 로 넣었을 때 싱크가 맞지 않아서 아니냐는 의견이 나왔다. 흠 그럴듯.. 그래서 요청 전에 가로채서 header 값을 넣어주는 인터셉터를 사용한다고 오호

사용방법

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  });

이처럼 요청과 응답 인터셉터가 존재한다. 나는 사용자 지정 axios 함수가 있었기 때문에

apiClient.interceptors.request.use((config) => ({
  ...config,
  headers: {
    "X-ACCESS-TOKEN": localStorage.getItem("jwt"),
  },
}));

이렇게 인터셉터를 apiClient.js 파일 안에 넣어주었다. 이제 새로고침 없이도 정상적으로 잘 작동한다.

profile
무럭무럭

0개의 댓글