在 Angular 中,可以使用 HTTPInterceptor 接口来拦截 HTTP 请求和响应。可以通过实现该接口来编写自定义拦截器。以下是一个示例:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class MyInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 对请求进行修改
request = request.clone({
setHeaders: {
Authorization: `Bearer ${localStorage.getItem('access_token')}`
}
});
// 其他操作
// 继续处理请求
return next.handle(request).pipe(
// 对响应进行修改
map((event: HttpEvent) => {
if (event instanceof HttpResponse) {
event = event.clone({ body: event.body.data });
}
return event;
})
);
}
}
上述代码实现了一个自定义的拦截器,并在其中使用了 clone
方法来对请求和响应进行修改操作。需要注意的是,修改后的请求和响应需要通过 next.handle()
方法继续传递,否则请求可能会被中断。拦截器需要在 AppModule 中进行注册:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my.interceptor';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, HttpClientModule],
declarations: [AppComponent],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
在 providers
列表中,将拦截器指定为 HTTP_INTERCEPTORS
,并将其设置为多提供者(multi: true
)。