在Angular中,HttpInterceptor可以用于在发送HTTP请求和接收HTTP响应之前执行一些操作。然而,有时会遇到HttpInterceptor运行两次的问题。以下是解决这个问题的一种方法:
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class UniqueInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 检查请求头中是否已经存在unique-interceptor标记
if (request.headers.has('unique-interceptor')) {
// 如果已存在,则直接通过
return next.handle(request);
}
// 向请求头中添加unique-interceptor标记
const modifiedRequest = request.clone({
headers: request.headers.set('unique-interceptor', 'true')
});
// 继续处理修改后的请求
return next.handle(modifiedRequest);
}
}
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 { UniqueInterceptor } from './unique.interceptor';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: UniqueInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
通过以上步骤,我们在每个HTTP请求中添加了一个名为"unique-interceptor"的请求头标记。当第二次拦截时,检查请求头中是否已经存在该标记,如果存在,则直接通过,避免了重复拦截的问题。
这样,HttpInterceptor就只会运行一次了。