#31.TIL | Axios intercepter사용하기

Axios intercepter

Axios에서 intercepter는 then이나 catch로 처리되기 전에 요청이나 응답을 가로챌 수 있다. 따라서, 이를 다양한 방식으로 활용할 수 있는데 interceptors.request.use()를 사용하여 요청할때 header에 token을 실어서 요청할 수도 있고, interceptors.response.use()를 사용하여 에러처리를 하거나 refreshToken을 통해 유효한 token을 재발급 받을 수도 있다.

Axios intercepter를 사용하여 만료된 accessToken 재발급 받기

axiosInstance.interceptors.response.use(
  response => {
    return response;
  }, // 에러가 아니면 return
  error => {
    const {
      config,
      response: { status },
    } = error; // 에러가 있으면 status 변수 설정

    const originalRequest = config;

    if (status === 401) { 
      //에러 status가 401(Unauthorized)이면 유효한 token을 발급받는 로직 실행
      const refreshToken = sessionStorage.getItem('refresh_token');
      axios({ //refreshToken을 보내고 유효한 accessToken을 받는 POST요청
        method: 'post',
        url: `${baseURL}/auth/refresh`,
        data: { refreshToken },
      }).then(response => {
        const accessToken = response.data.token;

        sessionStorage.setItem('access_token', accessToken);
	//새로 발급받은 accessToken을 sessionStorage에 저장
        originalRequest.headers = { access_token: accessToken };
	// 기존 요청에서 headers에 새로 받은 accessToken으로 교체
        return axios(originalRequest);
        //재발급 accessToken으로 앞에서 요청 실패한 요청 다시 보냄
      });
    }
    return Promise.reject(error);
  }
);