В этой статье блога мы рассмотрим, как обрабатывать ошибки 401 и 403 в Angular с помощью перехватчика HTTP. Мы предоставим вам простые и практичные примеры кода для реализации перехватчика и запуска выхода из системы при возникновении этих ошибок. Итак, приступим!

Понимание HTTP-перехватчика.
Прежде чем мы перейдем к реализации, давайте быстро разберемся, что такое HTTP-перехватчик. В Angular перехватчик позволяет перехватывать HTTP-запросы и ответы, позволяя изменять их до того, как они будут отправлены или получены приложением. Эта мощная функция позволяет нам обрабатывать ошибки глобально и выполнять общие задачи, например выход пользователя из системы в случае сбоя аутентификации.

Реализация HTTP-перехватчика:
Для начала создадим новый файл с именем auth-interceptor.ts(вы можете дать ему любое имя) и импортируем необходимые модули:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

Далее создайте класс и реализуйте интерфейс HttpInterceptor:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Your code implementation goes here
  }
}

Теперь с помощью метода interceptмы можем обрабатывать ошибки 401 и 403. Давайте рассмотрим несколько подходов:

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

import { Router } from '@angular/router';
constructor(private router: Router) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe(
    catchError((error) => {
      if (error.status === 401 || error.status === 403) {
        this.router.navigate(['/logout']);
      }
      throw error;
    })
  );
}

В этом подходе мы используем модуль Angular Routerдля перехода на страницу выхода при возникновении ошибки 401 или 403. Убедитесь, что у вас есть LogoutComponentи что он правильно настроен в вашем модуле маршрутизации.

Подход 2. Очистка локального хранилища и перенаправление:

import { AuthService } from './auth.service';
constructor(private authService: AuthService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe(
    catchError((error) => {
      if (error.status === 401 || error.status === 403) {
        this.authService.logout();
      }
      throw error;
    })
  );
}

В этом подходе мы предполагаем, что у вас есть AuthServiceс методом logout, который удаляет данные аутентификации пользователя, такие как его токен доступа, из локального хранилища. Это фактически приведет к выходу пользователя из системы.

В этой статье мы рассмотрели, как обрабатывать ошибки 401 и 403 в Angular с помощью перехватчика HTTP. Мы предоставили два практических подхода: перенаправление на страницу выхода и очистку данных аутентификации пользователя. Реализуя эти методы, вы можете обеспечить удобство работы с пользователем и повысить безопасность вашего приложения Angular.

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