NGX 加载拦截器 - JavaScript

在 Angular 应用程序中，每当应用程序加载时，浏览器会发出多个网络请求以获取所需的资源。但是，有时我们需要添加额外的操作来处理网络请求，如添加认证令牌、跟踪等。在这种情况下就可以使用拦截器来截取和处理这些请求。

Angular 提供了一个名为 HttpInterceptor 的类，该类可让我们创建应用程序的拦截器。通过使用拦截器类，我们可以向应用程序的 HTTP 请求添加公共头、设置默认参数、对响应进行处理等。

创建 HttpInterceptor 拦截器类

要创建拦截器类，我们需要实现 Angular 的 HttpInterceptor 接口。下面是一个简单的拦截器类示例，该类通过在每个 http 请求中添加认证头来向外部服务进行身份验证。

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 在每一个请求中添加认证头
    const authToken = this.authService.getAuthToken();
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${authToken}`)
    });

    // 将修改后的请求传递给下一个拦截器或者 HttpRequest 处理程序
    return next.handle(authReq);
  }
}

在上面的示例中，我们创建了一个名为 AuthInterceptor 的拦截器类，并使用 @ Injectable() 注释将其标记为 Angular 依赖注入的提供者。在 intercept() 方法中，我们使用 HttpClient 的头部对象 HttpHeaders将认证令牌添加到 Authorization 头部中。

使用拦截器

在将拦截器添加到应用程序中之前，我们需要在应用程序模块中引入拦截器提供程序。例如，以下是使用上面定义的 AuthInterceptor 的应用程序模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

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

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  providers: [
    // 添加 authInterceptor 拦截器提供程序
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的代码中，我们将 AuthInterceptor 拦截器定义为 HTTP_INTERCEPTORS 的提供者，并设置 multi: true 以确保我们可以添加多个拦截器。

这样，我们就完成了所有操作，在每次 HTTP 请求中添加身份验证头。这是使用拦截器实现自定义行为的基本概念。

使用拦截器可减少重复代码、提高代码复用性和可维护性，以及简化我们的应用程序逻辑。