Реализация перехватчика Angular

Содержание

Вопрос или проблема
Ответ или решение
Реализация HTTP интерцептора в Angular
Шаг 1: Создание интерцептора
Шаг 2: Настройка конфигурации приложения
Шаг 3: Убедитесь, что приложение запускается с корректной конфигурацией
Шаг 4: Проверка работоспособности интерцептора
Заключение

Вопрос или проблема

Я пытаюсь реализовать перехватчик для моего небольшого приложения, которое является автономным: true, и все, что я хочу, чтобы этот перехватчик делал, это проверять, если ответ от сервера приходит с ошибкой 401, чтобы выйти из системы для пользователя, поэтому я написал код с некоторыми console.logs для отслеживания этого
auth.interceptor.ts

import { inject, Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';
import { Router } from '@angular/router';
import { AuthService } from '../shared/services/auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthInterceptor implements HttpInterceptor {
  private authService = inject(AuthService)
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Вызывается перехватчик', req);
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          this.authService.logout(); 
        }
        return throwError(error);
      })
    );
  }
}

мой app.config.server.ts выглядит так

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering()
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app-routing.module';
import { HTTP_INTERCEPTORS, provideHttpClient, withFetch } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AuthInterceptor } from './interceptor/auth.interceptor';
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(), 
    provideHttpClient(withFetch()),
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
  ]
};

main.server.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

но проблема в том, что я даже не вижу этих console.logs, которые у меня есть в перехватчике, как будто перехватчик даже не вызывается

Я пробовал код выше, но он не работает. (standalone: true)

Попробуйте это:

auth.interceptor.ts:

export const authInterceptor: HttpInterceptorFn = (req, next) => {
...
}

main.ts

import { authInterceptor } from...

providers: [...
    provideHttpClient(withInterceptors([authInterceptor]))
...
]

Ответ или решение

Реализация HTTP интерцептора в Angular

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

Шаг 1: Создание интерцептора

Для начала, ваш интерцептор должен реализовывать интерфейс HttpInterceptor. Код вашего интерцептора может выглядеть следующим образом:

import { inject, Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';
import { AuthService } from '../shared/services/auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthInterceptor implements HttpInterceptor {
  private authService = inject(AuthService);

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Interceptor called:', req);
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          console.log('User is not authorized, logging out...');
          this.authService.logout(); 
        }
        return throwError(error);
      })
    );
  }
}

Шаг 2: Настройка конфигурации приложения

Для интеграции интерцептора в ваше приложение необходимо внести коррективы в файл конфигурации. Убедитесь, что ваш интерцептор добавлен в провайдеры HTTP клиента, как показано ниже:

import { HTTP_INTERCEPTORS, provideHttpClient, withFetch } from '@angular/common/http';
import { AuthInterceptor } from './interceptor/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
};

Шаг 3: Убедитесь, что приложение запускается с корректной конфигурацией

В main.ts вы должны убедиться, что приложение инициализируется с правильной конфигурацией:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

Шаг 4: Проверка работоспособности интерцептора

Если при выполнении кода отладочные сообщения из интерцептора не отображаются в консоли, это может свидетельствовать о нескольких возможных проблемах:

Неправильная настройка HTTP клиента: Убедитесь, что вы вызываете HTTP-запросы в своем приложении с использованием HttpClient, который подключен к вашему интерцептору.
Консоль браузера: Проверьте, не скрыты ли сообщения в консоли (например, установлены ли фильтры, которые могут исключать отображение логов).
Проблема с имплементацией: Если вы добавили authInterceptor как HttpInterceptorFn, убедитесь, что используете provideHttpClient(withInterceptors([authInterceptor])) вместо provideHttpClient(withFetch()).

Заключение

Интерцепторы в Angular играют важную роль в управлении HTTP-запросами и позволяют обрабатывать ошибки на глобальном уровне. Эффективная реализация интерцепторов помогает улучшить UX вашего приложения, повышая его безопасность и удобство. Если возникли проблемы, всегда стоит проверять последовательность конфигурации и логи. Таким образом, вы сможете в кратчайшие сроки выявить и устранить любые неполадки, обеспечивая стабильную работу вашего Angular-приложения.