Understanding canactivate and routes in angular 2

Question

I am trying to check if a user is authorized and if not direct him/her to login page. I actually managed to do that but i am having an hard time how the mechanism works. please see below code.

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let fus: FakeUserService  = new FakeUserService();
    if(!fus.authorization()){
      this.router.navigate(['login']);
      return false; // Code works even this line is commented out. The user is redirected to the login page.
    }
    return true;
  }

The point i don`t understand is how router.navigate works in this scenario. Does user go to the intended page and navigated back to login when i comment out "return false"?. Or "router.navigate" function overrides all the routing commands? I am kind of confused..

You could check the navigation events by yourself using routerModule.forRoot(paths,{enableTracing: true}) — Jota.Toledo, Nov 07 '17 at 08:53

Rahul Singh · Answer 1 · 2017-11-07T09:18:08.290

0

import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs";

@Injectable()
export class AuthGuard implements CanActivate{


  constructor(protected router: Router)
  {

  }

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot):Observable<boolean> | boolean{
      console.log("In Can Activate AuthGuard");
      if(route.params['key'] == "X"){
        return true;
      }
      this.router.navigate(['/home',{message:"Not Authorised"}]);
      return false;
    }
}

Route

  { path: 'guardcheck', component:  CheckComponent , canActivate: [AuthGuard]},

In the above example we return true when we want the user to proceed with the route on which the guard is placed and if not we navigate to the error page using router navigate and return false .

This false returned is for the guard to know that the condition failed .

A working example

edited Nov 07 '17 at 09:18

answered Nov 07 '17 at 07:17

Rahul Singh

19,030
11
64
86

why do we return false? Code is working even we return true.. And does the router.navigate activated after we return a value or immediately ? – rematnarab Nov 07 '17 at 07:20
@rematnarab it is not always the case that you will use router.navigate with canActivate if you dont use the same you need to tell the canActivate guard that the condition is not met and you do not allow the user to enter . That is for the guard to know that the condition is not mer – Rahul Singh Nov 07 '17 at 07:22
Why doesn`t this line this.router.navigate(['login']); works immediately ? Is router.navigate an asynch function ? – rematnarab Nov 07 '17 at 07:28
it is not a async function – Rahul Singh Nov 07 '17 at 07:30
@RahulSingh link broken – Jota.Toledo Nov 07 '17 at 08:51
@Jota.Toledo fixed it – Rahul Singh Nov 07 '17 at 09:18

Understanding canactivate and routes in angular 2

1 Answers1