使用 Angular 命令创建拦截器 - JavaScript

在 Angular 中，我们可以使用拦截器来处理 HTTP 请求和响应。拦截器可以用于添加公共的头部信息、附加身份验证令牌、处理错误等。

使用 Angular CLI 命令可以轻松地创建一个拦截器。下面是创建拦截器的步骤：

1. 打开终端或命令提示符，导航到你的 Angular 项目的根目录。
2. 运行以下命令以创建一个名为 http-interceptor 的拦截器：

ng generate interceptor http-interceptor

这将在 src/app 目录下创建一个名为 http-interceptor.interceptor.ts 的文件。

3. 打开 http-interceptor.interceptor.ts 文件，你将看到一个默认的拦截器类的结构。

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

@Injectable()
export class HttpInterceptorInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request);
  }
}

4. 编辑 intercept 方法以添加你的拦截逻辑。你可以在该方法中对请求进行修改、添加头部信息、处理响应等。

以下是一个示例，在请求添加身份验证令牌的头部信息：

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

@Injectable()
export class HttpInterceptorInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 如果需要添加身份验证令牌，请在此处修改请求对象
    request = request.clone({
      setHeaders: {
        Authorization: 'Bearer ' + YOUR_TOKEN_HERE
      }
    });

    return next.handle(request);
  }
}

5. 最后，将拦截器添加到你的应用程序模块的提供商列表中。打开 src/app/app.module.ts，并在 providers 数组中添加以下代码：

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorInterceptor } from './http-interceptor.interceptor';

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

6. 保存文件并重新启动你的应用程序。现在，你的拦截器将开始拦截和处理 HTTP 请求和响应。

这是使用 Angular CLI 命令创建拦截器的基本过程。你可以根据自己的需求，在拦截器中添加更多的逻辑。请参考 Angular 官方文档以获取更多关于拦截器的细节。

希望这篇文章对你有所帮助！