如何使用 RxJS 处理 401 Unauthorized 响应与 Angular 8 服务中的其他错误不同？

Question

I have a REST API that requires a user to be identified by an access token with each call.

Each API endpoint returns a 401 UNAUTHORIZED response if the token is not provided or has expired.

In some cases, I am calling the APIs with a timer.

In my service class:

getFoo(id: String): Observable<Foo> {
  return this.http.get<Foo>(url, HTTP_OPTIONS);
}

getFooList(): Observable<Foo[]> {
  return timer(0, FIVE_MINUTES).pipe(
    switchMap(() => this.http.get<Foo[]>(url, HTTP_OPTIONS))
  );
}

and, then in my component

fooList: Foo[] = [];

ngOnInit(): void {
  this.loadFooList();
}

private loadFooList() {
  this._fooService.getFooList().subscribe(
    (fooList) =>  this.fooList = fooList,
    (err) => console.error(err)
  );
}

How can I put a check in the service itself whether I have received a 401 response or not? Rather than having to do this in each component that uses the service?

Answer 1

I used an interceptor.

auth.interceptor.ts

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(
    private _router: Router,
  ) { }

  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(httpRequest).pipe(
        catchError((error) => {
            if (error.status == 401) {
                this._router.navigate(['/login']);
            } else {
                return Observable.throw(error);
            }
        })
    );
  }
}

Added it as a provider in my app.module.ts

@NgModule({
    providers: [{
     provide: HTTP_INTERCEPTORS,
     useClass: AuthInterceptor,
     multi: true
    },
  ],
  bootstrap: [AppComponent,]
})
export class AppModule { }