canActivate guard is not triggered for one component in Angular 5.1 app

Question

In my Angular 5.1.1 application, the canActivate guard on a single component is not triggered. When I route to 'user' the AuthenticationGuard is never triggered, but it works for all other paths.

I thought that it has something to do with that 'user' is used to redirect to when path is empty. So I changed the redirectTo property to client. First time the AuthGuard is not triggered, but next times always. For 'user' it is still not triggered.

Routes

const routes: Routes = [
    { path: 'error', component: ErrorComponent /* , canActivate: [AuthenticationGuard] */  },
    { path: 'id_token', component: OAuthCallbackComponent, canActivate: [OAuthCallbackHandler] },                   // reply URL AAD
    { path: 'client', component: ClientsComponent, canActivate: [AuthenticationGuard] },
    { path: 'colleagues', component: ColleaguesComponent, canActivate: [AuthenticationGuard]},
    { path: 'user', component: UserComponent, canActivate: [AuthenticationGuard] },
    { path: 'useroverview', component: UserOverviewComponent, canActivate: [AuthenticationGuard] },
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'user', pathMatch: 'full', canActivate: [AuthenticationGuard] },
    { path: 'loading', component: OAuthCallbackComponent },
    { path: 'noaccess', component: NoAccessComponent },
    { path: '**', component: NoAccessComponent }
];

AuthGuard

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const navigationExtras: NavigationExtras = {
            queryParams: { 'redirectUrl': route.url }
        };

        if (!this.adalService.userInfo || !this.adalService.accessToken) {
            sessionStorage.clear();
            sessionStorage.setItem('redirect', this.setRedirectUrl(route.url));
            this.router.navigate(['login'], navigationExtras);
            return false;
        }

        if (((route.routeConfig.path === "client" || route.routeConfig.path === "useroverview") && UserRights[sessionStorage.getItem('Role')] < 3) ||
            ((sessionStorage.getItem('UserType') === '66' || sessionStorage.getItem('UserType') === '74') && route.routeConfig.path === "colleagues") && UserRights[sessionStorage.getItem('Role')] === 0)
        {
            this.router.navigate(['404']);
            return false;
        }

        if (sessionStorage.length === 0) {
            this.spinner.show();
            return this.userManService.getUserInfo().switchMap(resp => {
                this.sessionUser(resp);
                return this.userManService.getMyAccountData().map(data => {
                    this.setUserInfo(data);
                    $(document).trigger('Authenticated');
                    this.spinner.hide();
                    this.myMenuOption();
                    return true;
                }).catch(() => {
                    this.spinner.hide();
                    return Observable.of(false);
                });
            }).catch(() => {
                this.spinner.hide();
                return Observable.of(false);
            });
        }
        else
            return Observable.of(true);
    }

How is it possible that the AuthGuard is not triggered for that component?

Does it work if you remove the { path: '', redirectTo: 'user' ....} from the routes? — John, Jul 24 '19 at 13:06
@John I could try that, but how can I then handle the empty path? — NiAu, Jul 24 '19 at 13:55

score 1 · Answer 1 · answered Jul 26 '19 at 07:17

I missed a very obvious thing (so stupid!). At the user path I also have children assigned. So when I set the canActivate guard there, it worked fine.

const routes: Routes = [{
path: 'user',
component: UserComponent,
canActivate: [AuthenticationGuard],
children: [
    { path: 'invite/:key', component: ModalContainerComponent, canActivate: [AuthenticationGuard] }
]
}]

canActivate guard is not triggered for one component in Angular 5.1 app

1 Answers1