如何在 Angular 拦截器中调用另一个（刷新令牌）API？答案

【问题标题】：How to call another (Refresh Token) API in Angular Interceptor?如何在 Angular 拦截器中调用另一个（刷新令牌）API？
【发布时间】：2021-09-01 23:18:42
【问题描述】：

我想在发出 api 请求之前获取新的访问令牌。此令牌将附加到拦截器中的先前 api 调用。那么如何在 Angular 拦截器中进行另一个 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);
  }
}

【问题讨论】：

标签： angular http interceptor angular-http-interceptors

【解决方案1】：

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

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

在上面 tap 用于获取中间调用的响应，而 switchMap 用于调用 actual api call。

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

你需要拦截实际的api调用
使 http get api 调用获取新的访问令牌
解析上述api 访问令牌的响应在本地变量或存储在localstorage
使用最新的访问令牌克隆实际的api调用请求
返回请求

所以，代码如下所示。

 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);
      })
    );
});

【讨论】：