Блог

Я хочу перенаправить страницу в axios interceptor.

Однако при рендеринге на стороне сервера я не могу получить доступ к контексту на стороне сервера в axios interceptor. Поэтому я пытаюсь использовать next / router. но это работает только на стороне клиента.

Как я могу это сделать?

Ниже приведена функция, выполняемая в перехватчике axios.

 // customAxios.ts
const customAxios = axios.create();

customAxios.interceptors.response.use((response) => response, responseErrorHandler);
 

 // responseErrorHandler.ts
const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
  if (error.response) {
    if (error.message === TIMEOUT_MESSAGE) {
      if (typeof window === 'undefined') {
         // Redirect to /503 page in server side rendering
      } else {
        window.location.href = '/503';
      }
    }
  }

  return Promise.reject(error);
}
 

Трудно дать ответ, не видя вашей фактической реализации getServerSideProps или getStaticProps, но это может помочь. Ваш перехватчик, вероятно, должен выдавать пользовательскую ошибку, которую вы можете идентифицировать в этих методах, а затем использовать Next.js перенаправляет

 // responseErrorHandler.ts
const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
  if (error.response) {
    if (error.message === TIMEOUT_MESSAGE) {
      if (typeof window === 'undefined') {
         throw new CustomError(); //Throw custom error here
      } else {
        window.location.href = '/503';
      }
    }
  }

  return Promise.reject(error);
}
 

И затем, в методах выборки данных (необходимо адаптировать к Typesctipt):

 export async function getServerSideProps(context) {

  try {
    await customAxios.get(...)
  } catch(e) {
    if (e instanceof CustomError){
      return {
        redirect: {
          destination: '/503'
        }
      };
    } else { 
        //...
    }
  }

  //...
}