How to make http post call inside route guard in angular7?

Question

I have an Angular 7 app in which I have a post call and on the basis of that post call response I want to make guard active/inactive. I have my route guard like this

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

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

But problem is that while my http post call is being in progress so my guard executes completely and returning false and after that response is coming from post call. How can I manage this scenario so I will make route true or false based on http post call response.

The problem is you are returning outside of a concurrent function and the code keeps evaluating. Return inside the post call instead of outside and return a ```Promise``` or an ```Observable``` instead of a boolean. CanActivate can return either of those -> https://angular.io/api/router/CanActivate — sinanspd, Feb 25 '20 at 20:18
see my updated question i have updated my route guard. But now it's giving an error on line `canActivate = (_router: ActivatedRouteSnapshot): Observable`. Saying that `function must return a value` — Fahad Hassan, Feb 25 '20 at 20:24
Hii, You can use route reolsver instead of http inside gurad. — Rahul Rathore, Feb 25 '20 at 20:26
you still need to return your call as a whole, see: https://stackoverflow.com/questions/37948068/angular-2-routing-canactivate-work-with-observable\ — sinanspd, Feb 25 '20 at 20:27

Kurt Hamilton · Answer 1 · 2020-02-25T22:27:23.247

0

If you want to make an Http request inside your canActivate function, you need to return an Observable<boolean> instead of a boolean, since you are now performing an asynchronous action.

And since you want to navigate on fail, you should return Observable<boolean | UrlTree> instead.

Simple version

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot): Observable<boolean | UrlTree> {
  return this.http.post(url, body).pipe(
    map((resp: any) => resp.success ? true : this.router.parseUrl('/path'))
  );   
}

We are returning the observable http request (the router will invoke it by subscribing), and mapping the response to either a

true - the router may proceed to the guarded route
UrlTree - the router should navigate to the route we have returned

Applied to your example

If we apply this to your example, we need to do a bit more work in the pipe, as you have an additional service call.

// TODO: inject other services
constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, 
      state: RouterStateSnapshot): Observable<boolean | UrlTree> {
    const userEmail = route.paramMap.get('email');

    // I am assuming this is a synchronous call
    userEmail = this._utilityService.decryptMsgByCryptoJs(userEmail);

    const url = this._const.userResetPasswordLinkExpiry;
    const body = { email: userEmail };

    return this._dataService.post(url, body).pipe(
      // initial map from response to true/false
      map((resp: any) => resp.success),

      // perform an action if false
      tap(success => {
        if (!success) {
          // I'm assuming this is synchronous. If not, you will need to do a switchMap
          this._dataService.exhangeResetPasswordObsMsg({ event: 'linkExpired' });
        }
      }),
      // final map to boolean | UrlTree
      map(success => success ? true : this.router.parseUrl('/login'))
    );   
}

There are some service calls in there that I'm assuming are synchronous. This answer demonstrates how you perform an asynchronous call inside canActivate and either allow the router to navigate or return an alternative route to navigate to.

edited Feb 25 '20 at 22:27

answered Feb 25 '20 at 20:32

Kurt Hamilton

12,490
1
24
40

Now it is giving an error like this `Cannot find name 'UrlTree'.` – Fahad Hassan Feb 25 '20 at 20:41
I didn't put *all* of the imports in there. If you are using VS Code you should be able to automatically import it. If not, you can manually import it from '@angular/router' – Kurt Hamilton Feb 25 '20 at 20:43
I have done with all imports but after that it's happening. Please see this https://ibb.co/tB3htqy – Fahad Hassan Feb 25 '20 at 20:45
The error is on `canActivate`. You're still trying to assign a function to it by writing `canActivate = ()`. You just need to write it as normal class function `canActivate(/. params ./)`, just like in my answer. – Kurt Hamilton Feb 25 '20 at 20:47
see my updated question. I have updated my guard definition according to your answer but still getting the same error. – Fahad Hassan Feb 25 '20 at 20:52
Can you take a bit of time to understand what's going on, and try to debug it. I've taken some time to give you a detailed answer. I can't debug your application via message board – Kurt Hamilton Feb 25 '20 at 20:54
please see this https://ibb.co/QQCDfYf . I have tried enough things that's why i posted here to get rid of this. – Fahad Hassan Feb 25 '20 at 20:55
Ah, I copied a mistake over from your original post. I copied your function and then amended it, but didn't spot the mistake in the declaration. Remove the `=>` after `Observable` – Kurt Hamilton Feb 25 '20 at 20:59
class functions should always look like this: `name(arg1: Type1): ReturnType { return returnType; }` – Kurt Hamilton Feb 25 '20 at 21:00
In your screenshot the `=>` is underlined as well as `canActivate` – Kurt Hamilton Feb 25 '20 at 21:01
yes it resolved me my rest of the errors but `canActivate` is still giving the same error. I don't understand why is it happening. Is it causing this error because i have 2 other gaurds in the same file? – Fahad Hassan Feb 25 '20 at 21:01
Can you post your entire file to a stackblitz. That doesn't sound right – Kurt Hamilton Feb 25 '20 at 21:01
Even if it doesn't compile – Kurt Hamilton Feb 25 '20 at 21:02
yes sure. Let me do that. see this https://stackblitz.com/edit/angular-5ujgo4 – Fahad Hassan Feb 25 '20 at 21:03
It's complaining about `resp => resp.success`. Try `(resp: any) => resp.success` – Kurt Hamilton Feb 25 '20 at 21:06
Btw, I've rolled your question back to preserve the original problem. – Kurt Hamilton Feb 25 '20 at 21:08
i did all the things that you said but still getting this error https://ibb.co/2j1HzkW :/ – Fahad Hassan Feb 25 '20 at 21:10
Did you copy auth.service.ts into stackblitz? – Kurt Hamilton Feb 25 '20 at 21:13
My guess is that that's inheriting the class you've just updated, and now the signatures are incompatible. If so, that really is out of scope of this question – Kurt Hamilton Feb 25 '20 at 21:15
I copied all the code of file in which i have all 3 route gaurds which have classes name as follows `UserAuth`,`AdminAuth`,`ForgotPasswordPageGuard` – Fahad Hassan Feb 25 '20 at 21:17
the file that i copied to stackblitz to show you is named as `auth.service.ts` – Fahad Hassan Feb 25 '20 at 21:21
Ah, I bet you need to add that second parameter: `canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable` – Kurt Hamilton Feb 25 '20 at 22:26

How to make http post call inside route guard in angular7?

1 Answers1

Simple version

Applied to your example

Linked