Delay the route canActivate method call till backend service return result in angular 7

Question

Need to delay the route canActivate method call until my Authentication service return user role for the user id.

Our angular application doesn't have any login page, it uses user id from the server login. When user access the URL, authentication service get called in app.compoment.ts but before the service return any result, canActivate method get called, and doesn't have the user role at that time. So blocks all user access.

I have tried using async and wait with https call to get the user data, but that also not worked. Can anyone help here?

Update the question with the source code for your canActivate and your auth service. — Reactgular, Dec 14 '19 at 15:58
Do the service call in the guard, you can return a boolean observable from the canActivate. — Ashish Ranjan, Dec 14 '19 at 16:52
You probably had to move your auth service call from App.component to the route guard. — oomer, Aug 19 '23 at 12:13

Developer · Answer 1 · 2020-01-22T15:21:48.163

0

Here, pipe() of rxJS is useful, rather subscribe first use pipe().

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {
    return this.loginService.isLoggedIn().pipe(
        map(e => {
           if (e) {
               return true;
             } else {

             }
         }),
          catchError((err) => {
             this.router.navigate(['/login']);
             return of(false);
           })
      );
  }

edited Jan 22 '20 at 15:21

answered Dec 14 '19 at 17:40

Developer

3,309
2
19
23

Pipe doesn't resolve the issue, I have used the pipe as pipe are mandatory in angular 7 API calls. To resolve the issue I have created the login page where user will provide the user id and then application will route to SSO login. – Vishal Jan 22 '20 at 13:29

Delay the route canActivate method call till backend service return result in angular 7

1 Answers1

Linked