Migration von Angular Interceptors zu funktionsbasierten Interceptors

In diesem Artikel werden wir lernen, wie man class-basierte Interceptors zu funktionsbasierten Interceptors migriert. In Angular v15 führte das Angular-Team eine neue Möglichkeit ein, Interceptors zu erstellen. Anstatt eine Klasse zu erstellen, die das HttpInterceptor-Interface implementiert, können wir jetzt eine Funktion erstellen, die das HttpInterceptorFn-Interface implementiert.

Warum sollten wir zu funktionsbasierten Interceptors migrieren?

Class-basierte Interceptors sind großartig, aber sie könnten in einer späteren Version auslaufen. Ein Indikator dafür ist zum Beispiel: withInterceptorsFromDi() 🤔

Abgesehen davon sind funktionsbasierte Interceptors aus vielen Gründen besser als class-basierte Interceptors:

Einfachere Verwendung Schnell zu erstellen Einfacher zu konfigurieren

Migrierung des AuthorizationInterceptor zu einem funktionsbasierten Interceptor

Der Interceptor sieht derzeit so aus:

import { Injectable, inject } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, mergeMap, tap } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable()
export class AuthorizationInterceptor implements HttpInterceptor {
    readonly angularFireAuth = inject(AngularFireAuth);

    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
        if (request.url.indexOf('oauthCallback') > -1) {
            return next.handle(request);
        }
        return this.angularFireAuth.idToken.pipe(
            mergeMap((token) => {
                if (token) {
                    request = request.clone({
                        setHeaders: {
                            Authorization: `Bearer ${token}`,
                        },
                    });
                }
                return next.handle(request);
            }),
        );
    }
}

Funktionsbasierten Interceptor erstellen und verwenden

Um den Migrationsprozess besser zu verstehen, erstellen wir zuerst einen einfachen funktionsbasierten Interceptor:

import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';

export const simpleInterceptorFn: HttpInterceptor = (req: HttpRequest<any>, next: HttpHandler) => {
  return next.handle(req);
};

Und wir können ihn wie folgt verwenden:

@NgModule({
  providers: [
    provideHttpClient(
      withInterceptors([simpleInterceptorFn])
    ),
  ],
})
export class AppModule {}

oder in einer Standalone Anwendung:

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([simpleInterceptorFn]))
  ]
});

Das ist alles! Wir haben einen einfachen funktionsbasierten Interceptor erstellt, den wir in unserer Anwendung verwenden können.

Migration des AuthorizationInterceptor zu einem funktionsbasierten Interceptor

Nun, da wir wissen, wie man einen funktionsbasierten Interceptor erstellt und verwendet, migrieren wir den AuthorizationInterceptor zu einem funktionsbasierten Interceptor.

Da unser Interceptor abhängig von anderen Diensten ist, müssen wir diese per inject-Funktion einfügen.

Hier ist die aktualisierte Version des AuthorizationInterceptor als funktionsbasierter Interceptor:

export function authorizationInterceptor(request: HttpRequest<unknown>, next: HttpHandlerFn) {
    const angularFireAuth = inject(AngularFireAuth);

    if (request.url.indexOf('oauthCallback') > -1) {
        return next(request);
    }

    return angularFireAuth.idToken.pipe(
        mergeMap((token) => {
            if (token) {
                request = request.clone({
                    setHeaders: {
                        Authorization: `Bearer ${token}`,
                    },
                });
            }
            return next(request);
        }),
    );
}

Jetzt können wir ihn wie folgt verwenden:

@NgModule({
  providers: [
    provideHttpClient(withInterceptors([authorizationInterceptor])),
  ],
})
export class AppModule {}

oder in einer Standalone Anwendung:

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authorizationInterceptor]))
  ]
});

Fertig!

Vorher vs. Nachher 🚀

Fazit

Die Migration von class-basierten Interceptors zu funktionsbasierten Interceptors bietet viele Vorteile. Es macht den Code einfacher, flexibler und besser zu warten. Wenn Ihre Interceptors von anderen Diensten abhängen, können Sie diese problemlos in den Funktionen verwenden, die die Interceptors erstellen. Dies ermöglicht eine klare Trennung der Verantwortlichkeiten und fördert eine bessere Testbarkeit.

Es ist ratsam, den Übergang zu funktionsbasierten Interceptors frühzeitig in Betracht zu ziehen, um von den zahlreichen Vorteilen zu profitieren und für zukünftige Angular-Versionen gerüstet zu sein.