Route to some other page based on guard in angular 6, rxjx 6 async request

Question

I have implemented the functionality where I am able to get the request and control the authorization of the page, I want to redirect to login page in case of false request.

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authSer.isAuthenticated().pipe(map((response) => {
            console.log('I ma here');
            if (response.status === 200) {
                return true;
            } else {
                console.log('Error getting data');
                return false;
            }
        }), catchError((error) => of(false))
    );
}

How can I route to the login page from here? I am using angular 6

Inject the router, call router.navigate(). The same way as you would navigate from anywhere else. Is you use the latest version of Angular, you can also return an Observable instead of an Observable — JB Nizet, Nov 27 '18 at 21:27
I am new to angular, so if you can give an example as to how to return an observable from catchError — Abhishek, Nov 27 '18 at 21:30
I understand I am throwing an observable, but suppose I want to print some value when it comes to catchError, how do I do that — Abhishek, Nov 27 '18 at 21:35
`catchError(error => { console.log('hello'); return of(false); })`. But what does this have to do with your question? And why do you ask this question, since you're using that exact syntax in your code already? — JB Nizet, Nov 27 '18 at 21:37
Works :) I tried the same stuff but it did not work. May be missed some brackets. — Abhishek, Nov 27 '18 at 21:40

score 0 · Answer 1 · answered Nov 28 '18 at 02:00

I know the question specifically states Angular 6, I just want to mention that as of angular 7.1 You can return an UrlTree instead or a boolean from your guard - as well as the Promise and Observable equivalents -, and that will serve as an automatic redirect. So in your case:

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  return this.authSer.isAuthenticated().pipe(
    map((response) => {
      console.log('I ma here');
      if (response.status === 200) {
        return true;
      } else {
        console.log('Error getting data');
        return false;
      }
    }),
    catchError((error) => of(false)),
    map(responseOk => {
      // Isolate dealing with true/false results since they can come from different opperators
      if (!responseOk) {
        return this.router.createUrlTree(['path', 'to', 'redirect'])
      }
      // alternatively, return a different UrlTree if you feel like it would be a good idea
      return responseOk
    })
  );
}

I also highly recommend upgrading to Angular 7 using their Guide. It's pretty painless and it will enable you with new features as well as bringing a bunch of bugfixes.

score 0 · Answer 2 · answered Nov 28 '18 at 06:37

Here example guard with redirect to url. May be it help:

export class AuthGuard implements CanActivate {    
constructor(private router: Router, private authService: AuthenticationService) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authService.isAuth) {
        return true;
    }
    else {
        this.router.navigate([state.url]); // or some other url
    }
}}

Route to some other page based on guard in angular 6, rxjx 6 async request

2 Answers2