Как остановить выполнение кода после ответа 401 в Axios

Комментарии

Давайте подробнее рассмотрим, как работает перехватчик Axios и как сделать так, чтобы выполнение кода прекращалось после ответа 401.

Обзор перехватчика Axios:
Перехватчики Axios - это функции, которые Axios позволяет определять глобально для всех запросов или ответов. Эти функции можно использовать для модификации запросов или ответов, обработки ошибок или выполнения других задач до или после выполнения HTTP-запроса.
Проблема:
В вашем случае вы хотите перенаправить пользователя на страницу входа в систему при получении ответа 401 (Unauthorized). Однако вы также хотите убедиться, что после перенаправления не будет выполняться никакой другой код.
Остановка выполнения:
В JavaScript обещания используются для обработки асинхронных операций, например HTTP-запросов. Когда обещание отклоняется, оно обычно переходит к ближайшему блоку catch для обработки ошибки. Однако если вы хотите полностью остановить выполнение, вы можете бросить исключение внутри блока catch.
Решение с пояснениями:
В перехватчике Axios, когда вы используете return Promise.reject('Unauthorized');, вы, по сути, бросаете исключение с сообщением ‘Unauthorized’. Это останавливает цепочку обещаний и гарантирует, что все последующие блоки .then() будут пропущены. В вашем случае это важно, поскольку вы не хотите, чтобы после перенаправления выполнялся код. Вот поток:
- Перехватчик Axios обнаруживает ответ 401.
- Он перенаправляет пользователя на страницу входа в систему с помощью router.push('/login').
- Сразу после этого он выбрасывает исключение, возвращая Promise.reject('Unauthorized');.
- Цепочка обещаний останавливается, и любой код, который был бы запущен после запроса Axios (например, дополнительные блоки .then()), не будет выполнен.
Разработка исключения:
В вашем приложении должны быть предусмотрены механизмы обработки ошибок, позволяющие отлавливать исключения типа ‘Unauthorized’ и обрабатывать их соответствующим образом. Например, вы можете показать пользователю сообщение об ошибке, если что-то пошло не так в процессе перенаправления.

Вот более подробный пример кода, который показывает, как можно обработать исключение:

axios.interceptors.response.use(
	(response) => {
		return response;
	},
	(error) => {
		if (error.response && error.response.status === 401) {
			// Используйте router.push() для перехода к экрану входа в систему
			router.push('/login'); // Настройте маршрут по необходимости
			// Выбросьте исключение, чтобы остановить дальнейшее выполнение
			return Promise.reject('Unauthorized');
		}
		// Обработка других ошибок здесь
		return Promise.reject(error);
	},
);

// Пример использования запроса Axios:
axios
	.get('/api/some-data')
	.then((response) => {
		// Обработка успешного ответа
		console.log('Данные получены:', response.data);
	})
	.catch((error) => {
		if (error === 'Unauthorized') {
			// Обработка неавторизованной ошибки (например, показ сообщения об ошибке)
			console.log('Unauthorized. Please log in.');
		} else {
			// Обработайте здесь другие ошибки
			console.error('Произошла ошибка:', error);
		}
	});

При таком подходе вы получаете тонкий контроль над тем, как обрабатывать различные типы ошибок, включая ошибку ‘Unauthorized’, вызванную перехватчиком.

Поделиться:

Поделиться: