Question

我正在使用Angular 7，并且在我的应用程序中使用了HTTP拦截器。

我无法在该HTTP拦截器中跟踪401状态代码。

我尝试了catchError和tap的进位，但是它的状态为0 ，我想要401。

我的代码在这里：

return next.handle(request).pipe(tap(event => {
            console.log('the ev is :', event);
            if (event instanceof HttpResponse) {
                this.onEnd();
            }
         }, err => {
            if (err instanceof HttpErrorResponse) {
                console.log('the eeeeeee is :', err);
                this.onEnd();
                // User logged out
                if (err.status === 401) {
                    this.router.navigate(['logout']);
                }
            }
        })).pipe(catchError(error => {
            console.log('the ee is :', error);
            return Observable.throw(error);
        }));

谢谢。

Answer 1

我使用的是角度6，当出现错误401或403时，它会重定向到登录页面。我认为它应该在角度7中起作用。应该有其他方法可以实现，但是我分享了适用于我的方法案件。希望对您有所帮助。

intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError(
        err =>
          new Observable<HttpEvent<any>>(observer => {
            if (err instanceof HttpErrorResponse) {
              const errResp = <HttpErrorResponse>err;
              if (errResp.status === UNAUTHORIZED || err.status === FORBIDDEN) {
                this.authService.goToLogin(this.router.url);
              }
            }
            observer.error(err);
            observer.complete();
          })
      )
    );

}

也许有人可以建议我，开展这种工作的更好方法是什么。

Answer 2

尝试一下

@Injectable()
export class HTTPListener implements HttpInterceptor {
constructor(private status: HTTPStatus) {
}



intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(map(event => {
        return event;
    }), catchError(err => {
        if (err.status === 401) {
        }

        const error = err.error.message || err.statusText;
        return throwError(error);
    }),
        finalize(() => {
        })
    )
}
}

Answer 3

您在async方法中有一个错误处理程序，然后有单独的管道tap。除非您打算对收到的响应（即http 200）采取行动，否则简单的拦截器实现应为：

catchError

Answer 4

import { Injectable } from '@angular/core';
import { 
 HttpEvent, HttpRequest, HttpHandler, 
      HttpInterceptor, HttpErrorResponse 
    } from '@angular/common/http';
    import { Router } from '@angular/router';
    import { Observable, of } from 'rxjs';
    import { catchError } from 'rxjs/operators';

    @Injectable()
    export class ServerErrorInterceptor implements HttpInterceptor {
    constructor(public router: Router){

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

        return next.handle(request).pipe(
          catchError((error: any) => {
            if (error.status == 401 || error.status == 0) {
                this.router.navigate(['/']);
            } else {

            }
            return of(error);
          })
        );    
      }
    }
     providers: [
        {
                provide: HTTP_INTERCEPTORS,
                useClass: ServerErrorInterceptor,
                multi: true
            }
      ],

无法在Angular 7 HTTP拦截器中捕获401状态代码

4 个答案: