Angular 7 错误拦截器 - 原始调用的问题

Angular 7 错误拦截器 - 原始调用的问题
我编写了一个拦截器来捕获所有 401 错误。如果发生此类错误，它应该尝试获取新的 JWT token ，如果有效，则重复原始请求。到目前为止，拦截器工作正常。我的问题是，在我给它新 token 后的原始请求不会再次出现在附加到原始 observable 的订阅中。

原始请求

成分:

this.serviceModel.getSearchItems(si).subscribe(res => {
   this.resultData = res;
});

服务模式

public getSearchItems(si: SearchInfo): Observable<VoList<SearchResultItemVO>> {
   return this.post<VoList<SearchResultItemVO>>(`/api/Search/GetSearchItems`, si, null,  SearchResultItemVO);
}

拦截器

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private serviceModel: SharedAccountServiceModel) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).catch(err => {
      return this.handleError(err, request, next);
    });
  }
  handleError(err, request: HttpRequest<any>, next: HttpHandler) {
    if (err.status === 401) {
      if (!!localStorage.getItem('auth_token') &&     !!localStorage.getItem('refresh_token')) {
        this.serviceModel.refreshlogin().switchMap(res => {
          return next.handle(this.addAuthenticationToken(request));
    })
    .subscribe();
  }
  else {
    localStorage.removeItem('accessinfo');
    localStorage.removeItem('auth_token');
    localStorage.removeItem('userid');
    location.reload(true);
  }
}
const error = err.error.message || err.statusText;
return throwError(error);
  }
  addAuthenticationToken(request) {
const accessToken = localStorage.getItem('auth_token');
if (!accessToken)
  return request;
return request.clone({
  setHeaders: {
    Authorization: `Bearer ${localStorage.getItem('auth_token')}`
  }
    });
  }
}

根据我的理解，switchMap 应该有助于再次执行原始订阅，但它不起作用。调用已执行，但未到达订阅。

最佳答案

我面临着非常接近的问题，我用“管道”中的“开关映射”解决了这个问题，HttpInterceptor 是这样的:

HttpErrorFilter :

import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { catchError, filter, finalize, switchMap, take } from 'rxjs/operators';

import { AuthenticationService } from './../services/authentication.service';
import { Injectable } from '@angular/core';

@Injectable()
export class HttpErrorFilter implements HttpInterceptor {

    isRefreshingToken = false;
    tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);

    constructor(private authenticationService: AuthenticationService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            catchError((error: any) => {
                if (error.status === 401 && !request.url.includes('auth/signin')) {
                    return this.handle401Error(request, next);
                }
                return throwError(error);
            })
        );
    }

    private handle401Error(request: HttpRequest<any>, next: HttpHandler) {

        if (request.url.includes('auth/refreshtoken')) {
            this.isRefreshingToken = false;
            return of(<any>this.authenticationService.logout());
        }
        if (!this.isRefreshingToken) {
            this.isRefreshingToken = true;
            this.tokenSubject.next(null);

            return this.authenticationService.refresh().pipe(switchMap(token => {
                if (token) {
                    this.tokenSubject.next(token.value);
                    return next.handle(request);
                }
                return of(<any>this.authenticationService.logout());
            }),
            catchError(err => {
                this.authenticationService.logout();
                return throwError(err.error);
            }),
            finalize(() => {
                this.isRefreshingToken = false;
            }));
        } else {
            this.isRefreshingToken = false;

            return this.tokenSubject
                .pipe(filter(token => token != null),
                take(1),
                switchMap(token => {
                    return next.handle(request);
                }));
        }
    }
}

HttpFilter :

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

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from './../../../environments/environment';

@Injectable()
export class HttpFilter implements HttpInterceptor {

    private apiUrl = environment.apiUrl;

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(this.addAuthentication(request));
    }

    private addAuthentication(request: HttpRequest<any>): HttpRequest<any> {

        if (!request.url.includes('/auth/')) {
            const token =  localStorage.getItem('access.token');
            if (token) {
                request = request.clone({
                    setHeaders: {Authorization: 'Bearer ' + token}
                });
            }
        }
        return request.clone({url: `${this.apiUrl}${request.url}`});

    }

}

NgModule 提供:

@NgModule({
...
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorFilter, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: HttpFilter, multi: true },
    ...
  ],
...
})

关于Angular 7 错误拦截器 - 原始调用的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54104995/