🔑 axios interceptor 활용하기

[mandoo1229]

axios interceptor란?

axios interceptor는 비동기 통신이 이루어지기 전에 요청(request)나 응답(response)을 가로채 작업을 추가로 수행한 뒤 통신이 이루어지게 하는 기능이다.
axios interceptor는 로그인 시 토큰 인증할 때만 사용하지는 않지만 토큰 인증시 요청을 보낼 때 header에 accessToken을 함께 실어 보내고, 응답 받을 때 에러가 발생하면 (accessToken이 만료)되면 refreshToken을 확인하여 재발급을 요청한다.

import axios from 'axios';

axios.interceptors.request.use(
  function (request) {
    request.headers['accessToken'] = localStorage.getItem('accessToken');
    return request;
  },
  function (error) {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  function (response) {
    return response;
  },
  async (error) => {
    const [response, config] = error;
    if (response.status === 401) {
      const { data } = await axios.get('/api', {
        baseURL: 'http://localhost:3000',
        params: {
          //refresh Token으로 재발급 요청 401에러가 뜨면?
          token: localStorage.getItem('refreshToken'),
        },
      });
      const { accessToken } = data;
      //액세스 토큰을 localStorege에 저장
      localStorage.setItem('accessToken', accessToken);
      // 새 액세스 토큰을 header에 저장
      config.headers['accessToken'] = accessToken;
      // 재요청
      return await axios(config);
    }
    return Promise.reject(error);
  }
);
export default axios;