При работе с Axios, популярной библиотекой JavaScript для выполнения HTTP-запросов, часто возникает ошибка 401 (Несанкционировано). В этой статье мы рассмотрим различные методы обработки ошибки 401 перехватчиков Axios и предоставим примеры кода для каждого подхода. Внедрив эти методы, вы можете обеспечить бесперебойную и безопасную работу пользователя при устранении ошибок, связанных с аутентификацией.

Методы обработки ошибки 401 перехватчиков Axios:

1. Метод 1: перенаправление на страницу входа

   • Описание: перенаправляет пользователя на страницу входа при возникновении ошибки 401.
   • Пример кода:

     axios.interceptors.response.use(
     (response) => response,
     (error) => {
      if (error.response.status === 401) {
        window.location.href = '/login';
      }
      return Promise.reject(error);
     }
     );

2. Метод 2. Обновление токена доступа

   • Описание: попытайтесь обновить токен доступа при получении ошибки 401 и повторите неудачный запрос.

   • Пример кода:

     const axiosInstance = axios.create();
     
     axiosInstance.interceptors.response.use(
     (response) => response,
     async (error) => {
      const originalRequest = error.config;
      if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;
        await refreshToken(); // Function to refresh the access token
        return axiosInstance(originalRequest);
      }
      return Promise.reject(error);
     }
     );

3. Метод 3: показать сообщение об ошибке

   • Описание: отображать пользователю сообщение об ошибке 401.
   • Пример кода:

     axios.interceptors.response.use(
     (response) => response,
     (error) => {
      if (error.response.status === 401) {
        showMessage('Unauthorized! Please log in.'); // Function to display error message
      }
      return Promise.reject(error);
     }
     );

4. Метод 4: выход из системы

   • Описание: выход пользователя из системы при возникновении ошибки 401.
   • Пример кода:

     axios.interceptors.response.use(
     (response) => response,
     (error) => {
      if (error.response.status === 401) {
        logoutUser(); // Function to log out the user
      }
      return Promise.reject(error);
     }
     );

Используя эти методы, вы можете эффективно обрабатывать ошибку 401 перехватчиков Axios и обеспечивать соответствующие действия для несанкционированных запросов. Будь то перенаправление на страницу входа, обновление токенов доступа, отображение значимых сообщений об ошибках или выход пользователей из системы — эти подходы позволяют улучшить удобство использования и безопасность вашего приложения.