angular v17 HttpInterceptorFn拦截器

在之前版本中我都是用的旧版写法写拦截器，但是最近的新项目用了angular v17 ,沿用之前的HttpInterceptor写拦截器不生效，后面则改用HttpInterceptorFn

旧版（HttpInterceptor）写法

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, catchError, tap, throwError } from 'rxjs';
import { NzMessageService } from 'ng-zorro-antd/message';
import { CookieUtils } from './utils/cookie.utils';


@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    constructor(
        private message: NzMessageService,
        private cookieService: CookieUtils
    ) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
            const tokenCookie = this.cookieService.get('tokenOfConsole');
            if (tokenCookie) {
                const tokenData = JSON.parse(tokenCookie);
                if (tokenData && tokenData['accessToken']) {
                    request = request.clone({
                        setHeaders: {
                            Authorization: `Bearer ${tokenData.accessToken}`
                        }
                    });
                }
            }
        
        return next.handle(request).pipe(
            tap(event => {
                if (event instanceof HttpResponse) {
                    this.responseHandle(event.body);
                }
            }),
            catchError(err => this.errorHandler(err))
        )
    }

    responseHandle(response: any) {
        if (response.code !== 0) {
            this.message.create('error', response.description);
        }
    }

    errorHandler(error: HttpErrorResponse) {
        switch (error.status) {
            case 400:
                break;
            case 401:
            case 402:
            case 403:
            case 404:
            case 500:
                this.message.create('error', error.message);
                break;
            default:
                this.message.create('error', 'Unknown Error');
        }
        return throwError(() => error);
    }

}

在app.module.ts引入

import { AuthInterceptor } from './app-auth.interceptor';

import { HTTP_INTERCEPTORS } from '@angular/common/http';

{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AuthInterceptor } from './app-auth.interceptor';
import { NzMessageService } from 'ng-zorro-antd/message';

registerLocaleData(en);


@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        BrowserAnimationsModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
        NzMessageService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

angular v17（HttpInterceptorFn）写法

import { inject } from '@angular/core';
import { HttpRequest, HttpResponse, HttpInterceptorFn, HttpHandlerFn } from '@angular/common/http';
import { Observable, tap} from 'rxjs';
import { NzMessageService } from 'ng-zorro-antd/message';
import { CookieUtils } from './utils/cookie.utils';

export const AuthInterceptor : HttpInterceptorFn = 
   (request: HttpRequest<any>, next: HttpHandlerFn): Observable<any> => {
        const message = inject(NzMessageService);
        const cookieService = inject(CookieUtils);
        const tokenCookie = cookieService.get('tokenOfConsole');
            if (tokenCookie) {
                request = request.clone({
                    setHeaders: {
                        Authorization: `Bearer ${tokenCookie}`
                    }
                });
            }
       
        let isSuccess = "";
        return next(request).pipe(
            tap({
                next: event => {
                    if (event instanceof HttpResponse) {
                        const responseBody = event.body as {code:number,description:string};
                        if(responseBody.code !== 0) {
                            message.create('error',responseBody.description)
                        }
                        isSuccess = "success";
                    }
                },
                error: error => {
                    isSuccess = "fail";
                    switch (error.status) {
                        case 400:
                            break;
                        case 401:
                        case 402:
                        case 403:
                        case 404:
                        case 500:
                            message.create('error', error.statusText);
                            break;
                        default:
                            message.create('error', 'Unknown Error');
                    }
                },
                finalize: () => console.log("Request ", isSuccess)
            })
        );

    }

无需在app.module.ts引入，但是要在app.config.ts引入

import {  withInterceptors } from '@angular/common/http';

import { AuthInterceptor } from './app-auth.interceptor';

provideHttpClient(withInterceptors([AuthInterceptor])),

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { HttpClientModule, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { AuthInterceptor } from './app-auth.interceptor';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        provideClientHydration(),
        provideAnimationsAsync(),
        provideHttpClient(withFetch(),withInterceptors([AuthInterceptor] )),
        importProvidersFrom(HttpClientModule)
    ]
};