Angular 9 中用于刷新 jwt 令牌的 HttpInterceptor 问题

Question

我正在使用 jwt 进行身份验证。我在提神方面遇到了麻烦。可能我认为这是由于我在 rxjs 可观察对象和操作符方面缺乏经验。我使用 auth.service.ts

的这些方法从后端获取刷新令牌

    getNewAccessToken(refreshToken: string){
        return this.httpClient.post<Token>(`${this.baseService.baseUrl}auth-token-refresh/`, { refresh: refreshToken }, this.baseService.httpOptions).pipe(
          map((response:Token) => {
            this.cookieService.set(environment.tokenAccessName, response.access, null, '/', null, null, 'Strict');
            return response;
          }
        ));
      }

      getAuthToken() { 
        return this.cookieService.get(this.tokenAccessName);
      }

      getRefreshToken() { 
        return this.cookieService.get(this.tokenRefreshName);
      }

      hasValidToken() {
        if (this.getAuthToken())
          return !helper.isTokenExpired(this.getAuthToken());
        else 
          return false;
      }

这是我的拦截器auth-interceptor.ts

    import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor,
    HttpErrorResponse
  } from '@angular/common/http';

import { AuthService } from '../services/auth.service';

import { throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { Token } from '../models/token';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    const authToken = this.authService.getAuthToken();
    if (authToken) {
      if (this.authService.hasValidToken()) {
        request = this.addAuthenticationToken(request);
      } 
    } 

    return next.handle(request).pipe(catchError(error => {
      if (error instanceof HttpErrorResponse && error.status === 401) {
        return this.handle401Error(request, next);
      } else {
        return throwError(error);
      }
    }));
  }

  handle401Error(request: HttpRequest<any>, next: HttpHandler) {
    const refreshToken = this.authService.getRefreshToken();
    this.authService.getNewAccessToken(refreshToken).subscribe(
      (response: Token) => {
        this.addAuthenticationToken(request);
        return next.handle(request);
      },
      error => throwError(error)
    )
  }

  addAuthenticationToken(request: HttpRequest<any>) {
    const authToken = this.authService.getAuthToken();
    return request.clone({
      headers: request.headers.set('Authorization', 'Bearer ' + authToken),
    });
  }

}

我的ide显示如下错误

Property 'intercept' in type 'AuthInterceptor' is not assignable to the same property in base type 'HttpInterceptor'.
Type '(request: HttpRequest<any>, next: HttpHandler) => Observable<unknown>' is not assignable to type '(req: HttpRequest<any>, next: HttpHandler) => Observable<HttpEvent<any>>'.
Type 'Observable<unknown>' is not assignable to type 'Observable<HttpEvent<any>>'.
Type 'unknown' is not assignable to type 'HttpEvent<any>'.
Property 'type' is missing in type '{}' but required in type 'HttpUserEvent<any>'.

还有

Argument of type '(error: any) => void | Observable<never>' is not assignable to parameter of type '(err: any, caught: Observable<HttpEvent<any>>) => ObservableInput<any>'.
Type 'void | Observable<never>' is not assignable to type 'ObservableInput<any>'.
Type 'void' is not assignable to type 'ObservableInput<any>'.

我想我可能弄错了返回类型，但我不知道出了什么问题

Answer 1

我终于找到了解决办法。无论如何，有人可以尝试改进它 我做了以下更改，现在它可以工作了 将 Observable> 添加到 intercept 签名导致我的问题中解释的第一个问题消失了。对于第二个，我遵循问题​​评论中的建议。 拦截器类

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (this.authService.hasValidToken()) {
      request = this.addAuthenticationToken(request);
    } 

    return next.handle(request).pipe(
      catchError(error => {
        if (error instanceof HttpErrorResponse && error.status === 401) {
          return this.handle401Error(request, next);
        } else {
           throw error;
        }
      }));
  } 

  handle401Error(request: HttpRequest<any>, next: HttpHandler) {
    return this.authService.getNewAccessToken().pipe(
      switchMap((response: Token) => {
        return next.handle(this.addAuthenticationToken(request));
      })
    )
  }

  addAuthenticationToken(request: HttpRequest<any>) {
    const authToken = this.authService.getAuthToken();
    return request.clone({
      setHeaders: {
       'Authorization': `Bearer ${authToken}` 
      }
    });
  }

}

虽然我的身份验证服务中用于获取刷新令牌的功能已被修改为

getNewAccessToken(){
    return this.httpClient.post<Token>(`${this.baseService.baseUrl}auth-token-refresh/`, { refresh: this.getRefreshToken() }, this.baseService.httpOptions).pipe(
      tap((response:Token) => {
        this.cookieService.set(environment.tokenAccessName, response.access, null, '/', null, null, 'Strict');
      }
    ));
  }