How to handle error while returning an observable in angular?

Question

I am creating an AuthGuard for my app..now when i try to load the component without getting logged in it should redirect me to the login page..But i am getting an error like following

and nothing happens.

I am throwing this error from my backend {"status":401,"message":"Auth Token Not found!"}} as there is no auth token

The following is the code of my AuthGuard

export class AuthGuardService implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> {

    return this.authService.checkLogin().pipe(
      map((data: HttpResponse) => {
        if (data.status == 200) {
          console.log("OUTPUT:", data)
          return true
        }
        else return false
      }),
    )

  }
}

The following is my function in AuthService:

 public checkLogin():Observable<HttpResponse> {

    return this.http.get<HttpResponse>('http://localhost:5000/auth/check-login', { withCredentials: true })

  }

Now how can i handle the errors like these and set a fallback value to false so if any error occurs then that route could not be accessed

Where is the code that should redirect the user?

Konrad
– Konrad

2022-11-19 19:04:31 +00:00
Commented Nov 19, 2022 at 19:04 — Konrad
– Konrad, Commented Nov 19, 2022 at 19:04

kellermat · Accepted Answer · 2022-11-20 15:37:57Z

If I understood you correctly you want to achieve the following behavior:

If checkLogin() gets a response that indicates "success", the auth-guard shall return true
If checkLogin() gets an error-response, redirect the user to a fallback-page and return false

If you use the code below, please note that catchError() is only triggered if the backend responds with an exception, while map() is always triggered if a success-response comes in from the backend. Therefore, in the positive case, you can simply return true without checking the contents of the response. However, if you receive an exception from the backend, you can redirect the user to the fallback page using this.router.navigate() and then return of(false) to prevent the request from passing the auth guard.

export class AuthGuardService implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> {

    return this.authService.checkLogin().pipe(
      map(() => true),
      catchError(() => {
        this.router.navigate(['route-to-fallback-page']);
        return of(false);
      })
    );
  }
}

Alternative solution for Angular 7.1+

Starting from Angular 7.1 you can just return a UrlTree-Object containing the fallback-route:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {

    return this.authService.checkLogin().pipe(
      map(() => true),
      catchError(() => this.router.parseUrl('/route-to-fallback-page'))
    );
  }

Nahom Ersom · Accepted Answer · 2022-11-21 08:46:02Z

You can use shared error response

this.http.get<HttpResponse>('http://localhost:5000/auth/check-login', { withCredentials: true }).pipe(
          catchError((error=>{
           
            this.getErrorMessage(error);
           return throwError(()=>error);
          }))
        )

The getErrorMessage Function will return the errors;

 private getErrorMessage(error:HttpErrorResponse){
   
      switch(error.status){
        
        case 400:{
          return this.toast.error(`Bad Request :${JSON.stringify(error.error?.Message)}`,error.status.toString())
        }
        case 401:{
          return this.toast.error(`Unauthorized :${JSON.stringify(error.error?.Message)}`,error.status.toString())
        }
        case 403:{
          return this.toast.error(`Access Denied :${JSON.stringify(error.error?.Message)}`,error.status.toString())
        }
        case 500:{
          return this.toast.error(`Internal Server Error :${JSON.stringify(error.error?.Message)}`,error.status.toString())
        }
        case 404:{
          return this.toast.error(`Page Not Found :${JSON.stringify(error.error?.Message)}`,error.status.toString())
        }
       default:{
        return this.toast.error('Check your internet connection!');
       }
      }
    }

Collectives™ on Stack Overflow

How to handle error while returning an observable in angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related