ssr build - Angular 8中ngOnInit拦截器的使用

在Angular 8中，ngOnInit 是组件生命周期钩子之一，它在组件初始化时被调用。而拦截器（Interceptor）是Angular HTTP模块中的一个功能，用于在HTTP请求发送之前或响应接收之后对它们进行处理。拦截器可以用于实现诸如日志记录、错误处理、请求重试、添加认证头等功能。

基础概念

ngOnInit:

ngOnInit 是Angular组件中的一个生命周期钩子。
它在组件的构造函数之后、第一次变更检测之前被调用。
通常用于执行组件的初始化逻辑。

Interceptor:

拦截器是一个实现了 HttpInterceptor 接口的服务。
它可以在HTTP请求发送到服务器之前或响应返回到客户端之前对其进行修改。
拦截器可以全局应用，也可以针对特定的HTTP请求应用。

类型与应用场景

类型:

请求拦截器：在请求发送之前修改请求。
响应拦截器：在响应接收之后修改响应。

应用场景:

认证：自动在请求头中添加认证令牌。
错误处理：统一处理HTTP请求的错误。
日志记录：记录所有的HTTP请求和响应。
缓存：对某些请求的结果进行缓存。

示例代码

以下是一个简单的拦截器示例，它在每个请求中添加一个自定义的请求头，并在响应错误时进行处理。

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class CustomInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 克隆请求并在其头部添加自定义头
    const modifiedReq = req.clone({
      headers: req.headers.set('X-Custom-Header', 'custom-value')
    });

    return next.handle(modifiedReq).pipe(
      catchError((error: HttpErrorResponse) => {
        // 在这里处理错误，例如显示错误消息或重试请求
        console.error('An error occurred:', error);
        return throwError(error);
      })
    );
  }
}

要使用这个拦截器，你需要在你的 AppModule 中将其添加到 providers 数组中，并使用 HTTP_INTERCEPTORS 令牌。

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomInterceptor } from './custom.interceptor';

@NgModule({
  // ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomInterceptor,
      multi: true
    }
  ],
  // ...
})
export class AppModule { }