时间戳

首页 > 解决方案 > 如何处理 401 Unauthorized 响应与使用 RxJS 的 Angular 8 服务中的其他错误不同？

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

问题描述

我有一个 REST API，它要求每次调用都通过访问令牌来识别用户。

如果令牌未提供或已过期，每个 API 端点都会返回 401 UNAUTHORIZED 响应。

在某些情况下，我使用计时器调用 API。

在我的服务类中：

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

然后在我的组件中

fooList: Foo[] = [];

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

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

如何检查服务本身是否收到 401 响应？而不是必须在使用该服务的每个组件中执行此操作？

标签： javascriptangulartypescriptrxjs

解决方案

我使用了拦截器。

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

在我的app.module.ts 中将其添加为提供程序

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

推荐阅读