在Angular中,可以使用HttpClient拦截器来处理请求和响应。下面是一个示例,演示如何在每个请求中刷新身份验证令牌。
首先,创建一个名为auth-interceptor.ts
的新文件,代码如下:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 获取存储在本地存储中的身份验证令牌
const token = localStorage.getItem('authToken');
// 如果存在令牌,则将其添加到请求头中
if (token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
// 继续处理请求
return next.handle(request);
}
}
然后,在app.module.ts
文件中,将AuthInterceptor
添加到提供的HTTP_INTERCEPTORS数组中。确保将其添加到数组的开头,以确保它是第一个应用的拦截器。
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({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
现在,每当发送HTTP请求时,拦截器将检查本地存储中是否存在身份验证令牌。如果存在令牌,则将其添加到请求头中。这样,每个请求都会自动包含身份验证令牌。
请确保在实际应用程序中替换localStorage.getItem('authToken')
的代码,以适应您的身份验证令牌存储机制。