在Angular中,拦截器的顺序与它们在导入模块中的顺序是相关的。拦截器的导入顺序决定了它们在请求链中的执行顺序。下面是一个解决方法,包含了代码示例:
AuthInterceptor
拦截器:import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 在请求头中添加授权信息
const modifiedRequest = request.clone({
setHeaders: {
Authorization: 'Bearer '
}
});
return next.handle(modifiedRequest);
}
}
LoggingInterceptor
拦截器:import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
console.log('请求发出:', request.url);
return next.handle(request);
}
}
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
import { LoggingInterceptor } from './logging.interceptor';
@NgModule({
imports: [HttpClientModule],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
]
})
export class YourModule { }
在这个示例中,AuthInterceptor
拦截器首先被应用于请求,然后是LoggingInterceptor
拦截器。因此,在发送请求之前,AuthInterceptor
会为请求添加授权信息,然后LoggingInterceptor
会记录请求的URL。根据导入的顺序,你可以调整拦截器的执行顺序。