Angular はリクエストをどのようにインターセプトしてカプセル化しますか?

environments ├── environment.prod.ts // 生产环境使用的配置 └── environment.ts // 开发环境使用的配置

// enviroment.ts export const environment = { baseUrl: '', production: false };

// http-interceptor.service.ts import { Injectable } from &#39;@angular/core&#39;; import { HttpEvent, HttpHandler, HttpInterceptor, // 拦截器 HttpRequest, // 请求 } from &#39;@angular/common/http&#39;; import { Observable } from &#39;rxjs&#39;; import { tap } from &#39;rxjs/operators&#39;; import { environment } from &#39;src/environments/environment&#39;; @Injectable({ providedIn: &#39;root&#39; }) export class HttpInterceptorService implements HttpInterceptor { constructor() { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { let secureReq: HttpRequest<any> = req; secureReq = secureReq.clone({ url: environment.baseUrl + req.url }); return next.handle(secureReq).pipe( tap( (response: any) => { // 处理响应的数据 console.log(response) }, (error: any) => { // 处理错误的数据 console.log(error) } ) ) } }

// app.module.ts import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; // 拦截器服务 import { HttpInterceptorService } from './services/http-interceptor.service'; providers: [ // 依赖注入 { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true, } ],

let secureReq: HttpRequest = req; // ... // 使用 localhost 存储用户凭证，在请求头带上 if (window.localStorage.getItem('ut')) { let token = window.localStorage.getItem('ut') || '' secureReq = secureReq.clone({ headers: req.headers.set('token', token) }); } // ...