Question

Angular 7错误拦截器–原始通话出现问题我编写了一个拦截器来捕获所有401错误。如果发生此类错误，则应尝试获取新的JWT令牌，如果可行，请重复原始请求。到目前为止，拦截器已经起作用。我的问题是，在我给它新令牌后发出的原始请求不会在附加到原始可观察对象的订阅中再次终止。

原始请求

组件：

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

ServiceModel

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应该有助于再次执行原始订阅，但是它不起作用。调用已执行，但未到达订阅。

Answer 1

我正面临一个非常接近的问题，我使用HttpInterceptor这样的“管道”中的“ switchmap”解决了这个问题：

HttpErrorFilter：

depends_on

HttpFilter：

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

NgModule提供了：

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

    }

}

Angular 7错误拦截器–原始通话出现问题

1 个答案: