Angular 6 : Empty path bypass auth guard

Question

I'm trying to use the Angular router, and I'm having an issue on the empty path . Here's my routes:

const routes: Routes = [

    { path: 'feed', loadChildren: './feed/feed.module#FeedModule', canLoad: [AuthGuardService] },
    { path: 'login', component: LoginPage },
    { path: 'register', component: RegisterPage },
    { path: '', redirectTo: '/feed', pathMatch: 'full' },
    { path: '**', redirectTo: '/' }
];

My AuthGuardService has a method canLoad which always returns false and redirects to the '/login' path :

...
@Injectable()
export class AuthGuardService implements CanLoad {
  constructor(private router: Router) {
  }
  canLoad(route: Route): boolean {

    this.router.navigate([ '/login' ]);
    return false;
  }
}

When I go to 'localhost:4200/feed', I'm redirected to '/login'.

But if I go to 'localhost:4200/', the auth guard is ignored and the components of my feed module are displayed.

Do you have any idea why ?

Thanks !

Does it work if you change `canLoad` to `canActivate`? – DeborahK Aug 01 '18 at 01:14 — DeborahK, Aug 01 '18 at 01:14

Pardhu · Answer 1 · 2018-08-01T04:58:08.220

I have a working code in my scenario. Check this, if it can help you.

Instead of canLoad, you can use canActivate.

canActivate is used to prevent an unauthorized user
canLoad is used to prevent the entire module of app

in below example you can replace canActivate with canLoad, if you wish to use canLoad instead.

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

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

and while writing routes, you can define like below.

{ path: 'newLeaveRequest', component: NewLeaveRequestComponent, canActivate: [AuthGuard]},
{ path: 'pastLeaveRequests', component: PastLeaveRequestComponent, canActivate: [AuthGuard]},

In app.module.ts Define AuthGuard in providers.

Thanks for the anwser, but I divided my app in different modules (like dashboard, newfeed, ..) and I really want to use my auth guard to prevent angular to load the full module and redirect to the login page ! If you look at the angular doc about canLoad, the constructor use the route only : https://angular.io/api/router/CanLoad I've tried examples with canActivate and using components instead of modules, it works perfectly.. I don't understand why here, my empty path redirects on feed but bypass the auth guard — BZHNomad, Aug 02 '18 at 18:49

score 0 · Accepted Answer · answered Aug 24 '18 at 21:45

I've solved my issue, sorry for the delay : I needed to use a component and to use canActivate in order to load the child module

{
    path: 'feed',
    canActivate: [ AuthGuard ],
    component: FeedComponent,
    children: [
        {
      path: '',
      loadChildren: () => FeedModule
}]}

Lazy loading for children works as well !

Cheers !

Angular 6 : Empty path bypass auth guard

2 Answers2