Angular HttpClient 拦截器实现认证刷新
在Angular应用中，HttpClient是用于处理HTTP请求的模块。为了确保应用的安全性，我们通常会在请求中添加认证信息。当认证令牌过期时，我们需要刷新令牌以保持用户的会话。本文将详细介绍如何在Angular中使用HttpClient拦截器来实现认证刷新。
认证刷新是确保用户会话持续的关键功能。当令牌过期时，我们需要自动获取新的令牌，而无需用户手动重新登录。Angular HttpClient拦截器为我们提供了实现这一功能的方法。
HttpClient 拦截器简介
HttpClient拦截器是Angular提供的一种机制，允许我们在请求和响应过程中拦截和处理请求。拦截器可以添加到HttpClient实例中，并在请求发送之前或响应返回之后执行特定的逻辑。
实现认证刷新
以下是使用Angular HttpClient拦截器实现认证刷新的步骤：
1. 创建拦截器
我们需要创建一个拦截器类，该类将负责处理认证刷新的逻辑。
typescript
import { Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { AuthService } from './auth.service'; // 引入认证服务
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// 添加认证令牌到请求头
const authReq = req.clone({
setHeaders: {
Authorization: `Bearer ${this.authService.getAccessToken()}`
}
});
return next.handle(authReq).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
// 令牌过期，尝试刷新令牌
return this.authService.refreshToken().pipe(
switchMap((newAccessToken: string) => {
// 更新认证令牌
this.authService.saveAccessToken(newAccessToken);
// 重新发送请求
return next.handle(req.clone({
setHeaders: {
Authorization: `Bearer ${newAccessToken}`
}
}));
})
);
}
return throwError(error);
})
);
}
}
2. 注册拦截器
接下来，我们需要在Angular模块中注册拦截器。
typescript
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth-interceptor';
@NgModule({
imports: [
HttpClientModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
})
export class AppModule {}
3. 使用认证服务
在上面的拦截器中，我们使用了`AuthService`来获取和保存认证令牌。现在，我们需要创建这个服务。
typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private accessToken: string;
constructor(private http: HttpClient) {}
getAccessToken(): string {
return this.accessToken;
}
saveAccessToken(accessToken: string): void {
this.accessToken = accessToken;
// 可以将令牌保存到本地存储或cookie中
}
refreshToken(): Observable<string> {
// 发送刷新令牌的请求
return this.http.post('/api/refresh-token', { refreshToken: this.accessToken })
.pipe(
catchError((error: any) => {
// 处理刷新令牌失败的情况
throw error;
})
);
}
}
4. 使用HttpClient
现在，我们可以在Angular组件中使用HttpClient发送请求，而无需担心认证刷新的问题。
typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-example',
template: `<button (click)="getExample()">Get Example</button>`
})
export class ExampleComponent {
constructor(private http: HttpClient) {}
getExample(): void {
this.http.get('/api/example').subscribe(
(data: any) => {
console.log(data);
},
(error: any) => {
console.error(error);
}
);
}
}
总结
本文介绍了如何在Angular中使用HttpClient拦截器实现认证刷新。通过创建一个拦截器类，我们可以在请求过程中自动处理令牌过期的情况，并尝试刷新令牌。这种方法可以确保用户会话的持续，提高应用的安全性。
Comments NOTHING