axiosで401のinterceptorを実装

「axiosで401のinterceptorを実装」のアイキャッチ画像

401返ってきたときに自動的にtoken取得するためのコードを実装しました

const instance = (): AxiosInstance => {
  const headers: { [key: string]: string } = { 'Content-Type': 'application/json' };
  const ax = axios.create({baseURL: API_PATH, timeout: 15000, headers });

  ax.interceptors.response.use((response) => response, async (error) => {
    const originalRequest = error.config;
    // eslint-disable-next-line no-underscore-dangle
    if (error.response.status === 401 && !originalRequest._retry) {
      // eslint-disable-next-line no-underscore-dangle
      originalRequest._retry = true;
      // eslint-disable-next-line no-underscore-dangle
      await refreshToken(); // ここでtokenをrefresh
      ax.defaults.headers.common.Authorization = `Bearer ${getToken()}`; //getToken()はstringのtokenをreturnする関数。これは書き換えてください
      return ax;
    }
    return Promise.reject(error);
  });
  return ax;
};

参考記事

Using Axios interceptors for refreshing your API token.