Как обработать 401 ошибку?

В Angular, 401 ошибка обычно связана с аутентификацией и авторизацией пользователя. Когда пользователь отправляет запрос к защищенному ресурсу, и его идентификатор авторизации не является действительным или отсутствует, сервер отправляет обратно 401 статусный код и соответствующее сообщение.

Чтобы обработать 401 ошибку в Angular, вы можете использовать HTTP интерцепторы. Интерцепторы позволяют перехватить и изменить запросы перед отправкой на сервер или ответы перед их обработкой в вашем коде.

Первым шагом будет создание нового интерцептора. Для этого создайте новый сервис, который реализует интерфейс HttpInterceptor.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Здесь вы можете выполнить любую предварительную обработку перед отправкой запроса на сервер
    // Например, вы можете проверить существование токена авторизации и добавить его к заголовкам запроса
    const authToken = localStorage.getItem('authToken');

    if (authToken) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${authToken}`
        }
      });
    }

    return next.handle(request).pipe(
      catchError(error => {
        if (error.status === 401) {
          // Здесь вы можете добавить код для обработки 401 ошибки
        }

        return throwError(error);
      })
    );
  }
}

После того, как интерцептор создан, вам необходимо зарегистрировать его в вашем NgModule. Это можно сделать в разделе providers в файле app.module.ts.

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

Теперь интерцептор будет применяться ко всем запросам, отправляемым из вашего приложения Angular. Когда сервер вернет 401 ошибку, код внутри catchError будет выполнен и вы сможете обработать ошибку так, как вам нужно. Например, вы можете перенаправить пользователя на страницу входа, очистить хранилище токенов аутентификации и отобразить сообщение об ошибке.

catchError(error => {
  if (error.status === 401) {
    // Обработка ошибки аутентификации
    // Например: перенаправление на страницу входа
  }

  return throwError(error);
})

Обработка 401 ошибки в Angular с использованием интерцепторов позволяет централизованно управлять ошибками аутентификации и авторизации и предоставляет гибкость для выполнения дополнительных действий при возникновении таких ошибок.