在Angular 10中,拦截器的行为发生了变化,不能直接向请求添加头信息。相反,可以使用HttpHeaders
类来创建新的头信息,并将其添加到请求中。
以下是一个示例,展示了如何在拦截器中使用HttpHeaders
来向请求添加头信息:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders } from '@angular/common/http';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler) {
const authToken = 'your-auth-token';
// 创建新的头信息
const headers = new HttpHeaders({
'Authorization': authToken
});
// 克隆原始请求,并添加头信息
const authReq = req.clone({ headers });
// 将新的请求传递给下一个处理器
return next.handle(authReq);
}
}
上述示例中,我们创建了一个名为AuthInterceptor
的拦截器,它会在每个请求中添加一个名为Authorization
的头信息,并将其值设置为your-auth-token
。
要在应用中使用该拦截器,需要在AppModule
或其他适当的模块中提供它:
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 { AuthInterceptor } from './auth.interceptor';
@NgModule({
imports: [BrowserModule, HttpClientModule],
declarations: [AppComponent],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
在上述示例中,我们通过将AuthInterceptor
提供给HTTP_INTERCEPTORS
令牌来注册拦截器。
这样,在应用中的每个请求中,都会通过AuthInterceptor
拦截器添加Authorization
头信息。