Using a base guard for all routes in Angular 2 application

Question

Is there a way to set a "base" canActivate when configuring routes in Angular2? So that all routes are covered by the same base check, and then each route can have a more granular check.

I have an AppModule with routing like this:

@NgModule({
    imports: [
        RouterModule.forRoot([
            {
                path: '',
                component: HomeComponent,
                canActivate: [AuthenticationGuardService],
                data: { roles: [Roles.User] }
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

And for the feature module FeatureModule:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: "feature",
                component: FeatureComponent,

                // I'd like to avoid having to do this:
                canActivate: [AuthenticationGuardService],
                data: { roles: [Roles.User] }
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class FeatureRoutingModule { }

I let AuthenticationGuardService check if a user has access to a route by using the roles provided in data.

Can I do something to avoid having to set canActivate and data in all my feature routing modules? I'd like to just configure a "base" canActivate for all routes in this application.

Bucaramanga

You can create route object from a class or helper function. That's the most simple (and probably the only available) solution. – Julesjuley

@estus So you mean that I should do something like: RouterModule.forChild([helperService.getRoute("feature", FeatureComponent)])? And then that helper service (or class or method..) always adds the base Guard to the generated route object? – Bucaramanga

Yes. I would personally go with something like RouterModule.forChild([new AuthenticatedRoute({ path: ..., component: ... })]) – Julesjuley

@Joel, what was the verdict? do you mind sharing your AuthenticationGuardService? on further googling, this sounds like a solution? #40672953 – Bibliopole

@Bibliopole Haven't really found a solution I'm happy with. The one you link to is ok, but still requires you to put it in all your routing modules. – Bucaramanga

i meant, you could have your main route with {path: '', canActivate: [AuthenticationGuardService], canActivateChild: [AuthenticationChildGuardService], children: [... /*no need for auth guard here, this is where you would add all your other routes as children on the main component-less route*/]} you still need the data though – Bibliopole

on closer inspection, if you have more than 2 levels of hierarchy, my suggestion might/will not work – Bibliopole

Answer 1

I've written a solution to add the Guard dynamically for every routes of my app (including those defined by child modules).

I've figured out this solution while reading this Router Docs.

Edit

Here is a living StackBlitz sample.

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, data: { skipGuard: true } },
  { path: '403', component: ForbiddenComponent, data: { skipGuard: true } },
  { path: '**', component: NotFoundComponent, data: { skipGuard: true } }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule {
  
  constructor(router: Router) {
    router.config
        .filter(route => !route.data || !route.data.skipGuard)
        .forEach(route => this.addGuard(route));
  }
  
  private addGuard(route: Route): void {
    route.canActivate = route.canActivate ? 
                   [AuthGuard].concat(route.canActivate) : [AuthGuard];
    route.canActivateChild = route.canActivate ? 
                   [AuthGuard].concat(route.canActivate) : [AuthGuard];
  }
}

Unprintable

just a quick note that if route.canActivate is undefined for a non skipped route, then the updated route.canActivate will produce [AuthGuard, undefined] using above answer. And its actually very hard to debug and be found as the actual reason for the resulting error. – Cinch

I tried to implement this but I couldn't. The guard is added but I get an error on every navigation. Maybe it's because my guard has dependencies that are resolved differently when injected in AppRoutingModule. Do you have a running example on stackblitz or something like that? Thanks. – Intercalary

@MarcosDimitrio I've just edited the answer to include a StackBlitz demo. – Unprintable

@Cinch I've made a fix to the error you have pointed. Check it in the stackblitz link I've included. – Unprintable

Answer 2

const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    children: [
      { path: '', component: HomeComponent },
      { path: 'builds', component: BuildsComponent },
      { path: 'files', component: FilesComponent },
      { path: 'publications', component: PublicationsComponent }
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' }
];

Deception

While working, this is currently not safe because child routes added via forChild are added as siblings to the forRoot routes thus not within the hierarchy and will not trigger the guard. – Allomorph

You should use canActivateChild instead of canActivate for this to work properly. – Macias