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

【问题标题】：Not able to catch 401 status code in Angular 7 HTTP Interceptor无法在 Angular 7 HTTP 拦截器中捕获 401 状态代码
【发布时间】：2022-04-15 17:14:07
【问题描述】：

我正在使用 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);
        }));

谢谢。

【问题讨论】：

我不太确定当出现错误时tap 是否被命中。谷歌为它。
我遇到了这个问题，原因只是在开发模式下我得到状态 0，而在服务中我得到 401，而在拦截器中我得到 0。当我在服务器上部署应用程序时。一切正常，我得到了正确的状态，代码或配置没有任何变化。我不知道为什么，但它只发生在开发模式下。
@FarhatZaman，即使在服务器上部署应用程序后，仍然存在相同的问题。

标签： javascript angular http

【解决方案1】：

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

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

  return next.handle(request).pipe(
      catchError(err => {
        if (err instanceof HttpErrorResponse) {

          if (err.status === 401 || err.status === 403) {
              // Invalidate user session and redirect to login/home
          }

          // return the error back to the caller
          return throwError(err);
        }
      }),
      finalize(() => {
        // any cleanup or final activities
      })
    );
}

【讨论】：

【解决方案2】：

我正在使用 Angular 6，当出现错误 401 或 403 时，它会重定向到登录页面。我认为它应该在 Angular 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();
          })
      )
    );

}

也许有人可以建议我执行此类工作的更好方法是什么。

【讨论】：

无需在错误处理程序中创建新的 Observable 并再次调用observer.error(err)。您可以简单地返回错误，它将继续向实际调用者发出错误的 observable。我在下面发布了一个示例。
@dcg 仍然在errResp.status 中获得0。
@ArpitMeena 你确定要访问服务器吗？

【解决方案3】：

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
  }
]

【讨论】：

【解决方案4】：

试试这个

@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(() => {}),
    )
  }
}

【讨论】：