Executing an asynchronous function within an Angular 7 interceptor is crucial

Question

Executing an asynchronous function within an Angular 7 interceptor is crucial

I've been working on creating an interceptor to handle a situation where a function needs to be called to refresh the session upon receiving a 401 error response. Here's what I have so far but I'm facing build issues and struggling to figure out how to make it work:

intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
request = request.clone({
  withCredentials: true
});
return next.handle(request).pipe(
  catchError((error: HttpErrorResponse) => {
    if (error.status === 401) {
      return this.userAPI
        .refreshSession(this.authService.getRefreshToken())
        .then(res => {
          this.authService.setAuthenticated(false);
          return next.handle(request);
        });
    } else {
      this.authService.setAuthenticated(false);
    }
  })
 );
}

VS Code is showing this error message:

Type 'Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | Observable<HttpEvent<any>>' is not assignable to type 'Observable<HttpEvent<any>>'.

angular typescript

Answer 1

Answer №1

catchError is required to result in an observable. You could try the following solution or something along those lines:

intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
request = request.clone({
  withCredentials: true
});
return next.handle(request).pipe(
  catchError((error: HttpErrorResponse) => {
    if (error.status === 401) {
      return this.userAPI
        .refreshSession(this.authService.getRefreshToken())
        .then(res => {
          this.authService.setAuthenticated(false);
          return next.handle(request);
        });
    } else {
      this.authService.setAuthenticated(false);
      // Include this
      return next.handle(request);
    }
  })
 );
}

Answer 2

catchError is required to result in an observable. You could try the following solution or something along those lines:

intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
request = request.clone({
  withCredentials: true
});
return next.handle(request).pipe(
  catchError((error: HttpErrorResponse) => {
    if (error.status === 401) {
      return this.userAPI
        .refreshSession(this.authService.getRefreshToken())
        .then(res => {
          this.authService.setAuthenticated(false);
          return next.handle(request);
        });
    } else {
      this.authService.setAuthenticated(false);
      // Include this
      return next.handle(request);
    }
  })
 );
}

Executing an asynchronous function within an Angular 7 interceptor is crucial

Answer №1

Similar questions

Tips for preventing keyboard events from being inherited by all pages in the stack in Ionic framework

When using Angular 2 formControl, manually changing the value may not be detected by the form

Once app.component's ngOnInit is completed, the child's ngOnInit will be triggered in Angular6

Typescript error: Cannot assign type to argument

What is the process for unit testing the 'navigate' function in Angular that includes query parameters?

Angular tips: Retrieving user ID for API authorization

Enhance your Angular2+ writing skills by delving into the intricacies of subscriptions with `

Using Conditional Types in Supabase Query results in the TypeScript error, "Type is incompatible with type 'never'."

implement some level of control within the ngFor directive in Angular

Guide on troubleshooting Node TypeScript in Visual Studio Code when the JavaScript source is stored in a separate directory

Obtaining a binary value in the switch component of materialize framework with Typescript

defining data types based on specific conditions within an object {typescript}

Vue.js with TypeScript: The property 'xxx' is not found on the type 'never'

Learn how to define an array of member names in TypeScript for a specific type

Is it possible to replicate a type in TypeScript using echo?

Trouble with @Input() in Angular 2 when selector is surrounded by HTML tag

Maintaining checkbox selection while switching pages in Angular

VS Code is flagging TypeScript errors following the recent software update

Utilizing CSS classes to style custom day templates in ng-bootstraps datepicker

Searching for a working node within a document (encountering a throw err) in the context of Express and Node