Ошибки Angular catch в центральном месте или компоненте

У меня есть проект Angular 9, который работает с .NET Core WEB API. На сайте реализована аутентификация пользователей на основе ролей. API возвращает два типа ошибок: 401 и 403 в зависимости от правил авторизации для метода контроллера.

Моя цель — отображать сообщение в моем компоненте макета, когда API возвращает любую из этих ошибок, например:

  • 401: «Срок действия сеанса истек, пожалуйста, войдите в систему».
  • 403: «У вас нет доступа к этой функции».

Есть ли способ поймать эти ошибки в Angular и узнать, какая из них была выброшена?


person Johannes Karsten    schedule 02.06.2020    source источник


Ответы (1)


Вы можете использовать перехватчики для перехвата всех http-запросов. В вашем случае вам нужно поймать ответ. Сделать это;

В предоставленном вами модуле HttpClientModule (app/core).module.ts

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { HttpErrorInterceptor } from '<path of interceptor>';

@NgModule({
imports: [HttpClientModule],
providers: [
     {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpErrorInterceptor,
      multi: true,
    },
  ]
});

error.interceptor.ts

export class HttpErrorInterceptor implements HttpInterceptor {
  constructor(
      // your injections if you need
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        switch (err.status) {
          case 401: {
            this.handle401();
          }
          case 403: {
            this.handle403();
          }
        }
        return throwError(err);
      }),
    );
  }
person nevzatopcu    schedule 03.06.2020
comment
Спасибо, очень подробно, я проголосую, и если это сработает для меня, я отмечу это как ответ - person Johannes Karsten; 03.06.2020
comment
У меня проблема с именем 'catchError'. Сообщение об ошибке: Не удается найти имя 'catchError'. Вы имели в виду 'RTCError'? Я пропустил какой-либо импорт или что-то в этом роде? - person Johannes Karsten; 03.06.2020
comment
Вы можете импортировать его из rxjs/operators @JohannesKarsten. - person nevzatopcu; 04.06.2020