How to access route params in route guard clause in Angular 7?

Question

I have an Angular 7 app in which I have a route like this

{ path : 'forgot-password/:resetHash/:email', 
  component : ForgotPasswordComponent, 
  canActivate : [ForgotPasswordPageGuard]},

Now I tried to access this route's params in it's route-guard but I didn't get route params in guard. Here is my forgotpassword.route.guard.ts

constructor(private _utilityService: UtilitySerivce, private _dataService: DataService, private _const: Constants, private _router: ActivatedRouteSnapshot) {
}

canActivate = (): boolean => {
    console.log('in link expiry guard')
    let userEmail = this._router.paramMap.get('email');
    let isAllow = false;

    console.log('params : ', userEmail)
    userEmail = this._utilityService.decryptMsgByCryptoJs(userEmail);
    console.log('user email : ', userEmail)
    this._dataService.post(this._const.userResetPasswordLinkExpiry, { email: userEmail }).subscribe(resp => {
        if (resp.success) {
            isAllow = true;
        } else {
            isAllow = false;
        }
    })
    if (isAllow) {
        return true;
    } else {
        this._utilityService.navigate('/login');
        this._dataService.exhangeResetPasswordObsMsg({ event: 'linkExpired' });
        return false;
    }
}

But it's giving this error

What am I doing wrong?

**Typo** alert: it's a **guard** - not a "gaurd" .... – marc_s Feb 24 '20 at 20:35 — marc_s, Feb 24 '20 at 20:35

Kurt Hamilton · Accepted Answer · 2020-02-25T20:19:45.850

8

canActivate takes the ActivatedRouteSnapshot as its first parameter, so add that to your function.

export class MyGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean => {
    const email = route.paramMap.get('email');

    // the rest of the implementation
  }
}

CanActivate interface from the docs

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

EDIT

If you want to make an HTTP request inside your guard, you return Observable<boolean> instead. You can see that this is permitted from the interface.

export class MyGuard implements CanActivate {
  constructor(private http: HttpClient) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> => {
    const email = route.paramMap.get('email');

    return this.http.get('some url').pipe(
      // map response to some boolean value that determines the permission
      map((response): boolean => true)
    );
  }
}

edited Feb 25 '20 at 20:19

answered Feb 24 '20 at 18:59

Kurt Hamilton

12,490
1
24
40

when i use `RouterStateSnapshot` so it's giving an error like this `NullInjectorError: No provider for ActivatedRouteSnapshot!` – Fahad Hassan Feb 25 '20 at 19:06
Have you imported the routing module? – Kurt Hamilton Feb 25 '20 at 19:08
yes i have imported `RouterModule` in my app.module.ts and i am getting this error https://ibb.co/pJkCDr8 – Fahad Hassan Feb 25 '20 at 19:13
You shouldn't need router state snapshot if you just want to get params. – Kurt Hamilton Feb 25 '20 at 19:16
I didn't get your point. When i was using `ActivatedRoute` so you said that `canActivate` only uses `ActivatedRouteSnapshot` now you are saying that you don't need to use this? what do you want to say? please clarify in your answer – Fahad Hassan Feb 25 '20 at 19:19
My answer clearly shows how to get params from within the `canActivate` function. Use this signature: `canActivate(route: ActivatedRouteSnapshot): boolean` – Kurt Hamilton Feb 25 '20 at 19:20
I added the full interface to show where it comes from – Kurt Hamilton Feb 25 '20 at 19:21
And i am telling you the same that i am using exactly your method and getting the error whose link sent above. – Fahad Hassan Feb 25 '20 at 19:21
Are you trying to inject it into the constructor? Because `canActivate` is a function – Kurt Hamilton Feb 25 '20 at 19:24
You've not applied it in the way my answer said. `route: ActivatedRouteSnapshot` is the first argument in `canActivate` – Kurt Hamilton Feb 25 '20 at 19:28
can i make http call inside my route guard? – Fahad Hassan Feb 25 '20 at 20:07
Yes. I will add to my answer – Kurt Hamilton Feb 25 '20 at 20:15
please answer my this question https://stackoverflow.com/questions/60402486/how-to-make-http-post-call-inside-route-gaurd-in-angular7 – Fahad Hassan Feb 25 '20 at 20:16
Done. It's actually a bit more complicated that my update here, so worth a different answer – Kurt Hamilton Feb 25 '20 at 20:33

How to access route params in route guard clause in Angular 7?

1 Answers1