如何在Angular Interceptor中调用另一个(刷新令牌)API

Question

我想在发出api请求之前获取新的访问令牌。此令牌将附加到拦截器中的上一个api调用。那么如何在angular interceptor中进行另一个api调用呢？

import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
// To do for validating token 
request = request.clone({
setHeaders: {
Authorization: 'Bearer '+ localStorage.getItem('access_token')
}
});
return next.handle(request);
}
}

Answer 1

Angular拦截器提供了一种在进行实际api调用之前调用另一个api调用的方法。在继续之前，您需要导入以下

import { HttpClient } from '@angular/common/http';
import { catchError, switchMap, tap } from 'rxjs/operators';

在上面的中，tap用于获取中间调用的响应，其中switchMap被用于调用实际api调用。

所以，它有以下步骤来完成这项工作。

1. 您需要拦截实际的api调用
2. 让http获取api调用获取新的访问令牌
3. 解析本地变量或存储在localstorage中的上述api访问令牌的响应
4. 使用最新的访问令牌克隆实际的api调用请求
5. 返回请求

因此，代码如下所示。

constructor(private http: HttpClient) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return this.http.get(`https://<fetch access token URL>`, {observe: 'response'}).pipe(
tap(response => {
localStorage.setItem("access_token", response.headers.get('access_token'));
}),
switchMap(() => {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${localStorage.getItem('access_token')}`
}
});
return next.handle(request);
})
);
});