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

Question

我想在发出 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);
  }
}

Answer 1

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

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

在上面 tap 用于获取中间调用的响应，其中 switchMap 用于调用 actual api呼叫.

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

您需要拦截实际的 api 调用
使 http get api 调用 获取新的访问令牌
解析上述 api access token 的响应在局部变量中或存储在 localstorage
使用最新的访问令牌
return 请求

因此，代码如下所示。

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

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

How to call another (Refresh Token) API in Angular Interceptor?

angular

http

interceptor

angular-http-interceptors