Angular 6 - Return value on http error

Question

i'm trying to protect my routes by implementing an asynchronous guard. To do so, I've created an AuthService with a method called isUserLoggedIn that consumes information from an API.

auth.service.ts

isUserLoggedIn(): Observable<boolean> {
    return this.http.get<HttpApiResponse>(AppSettings.API_ENDPOING + 'auth/test').pipe(
      map(response => response.data.logged)
    );
  }

And I have a guard that uses the service, if the user is logged in, the access is denied, but if the user is not logged in the access is granted.

export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService) { }

    canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.auth.isUserLoggedIn().pipe(
      retry(3),
      map(response => !response)
    );
  }
}

By here, everything is working properly. Now what I need is to grant the access to the user when the API is not responding or responds with error codes.

SplitterAlex · Accepted Answer · 2018-06-22 03:05:47Z

1

You can catch a http error with the catchError operator and handle the error accordingly.

export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService) { }

    canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | 
Promise<boolean> | boolean {
    return this.auth.isUserLoggedIn().pipe(
      retry(3),
      map(response => !response),
      catchError(err => {
        // handle error, check error code and return true or 
             false
      })
    );
  }
}

answered Jun 22, 2018 at 3:05

SplitterAlex

2,8212 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ssantamariaparra · Accepted Answer · 2018-06-22 15:15:38Z

1

As SplitterAlex told me, I used the catchError inside pipe to handle the error as follows.

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.auth.isUserLoggedIn().pipe(
      retry(3),
      map(response => !response),
      catchError(error => {
        return of(true);
      })
    );
  }

An important thing here was to import of from 'rxjs' to be able to return true or false inside the catchError.

answered Jun 22, 2018 at 15:15

ssantamariaparra

133 bronze badges

1 Comment

SplitterAlex Over a year ago

Do you mind accept my answer as vaild answer? I think it helped you :) Thank you

Collectives™ on Stack Overflow

Angular 6 - Return value on http error

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related