I have developed a more organized approach for my application. My strategy involves categorizing pages into secured and public sections, using separate templates for each. By implementing public components and secure components, I can then apply the necessary guard protection to the appropriate template.

It is crucial to include [Guard] in the complete route requiring security measures.

When securing a route, I ensure to specify the parent routes in the app.routing.ts file.

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

Pay attention to this particular line,

 { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }

I establish two layouts:

/public/ for all public components

/public/public.routes.ts

/secure/ for all secure components

/secure/secure.routes.ts

Secure routes

Note that these specific routes do not require Guard since their handling is managed by the template parent.

export const SECURE_ROUTES: Routes = [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
    { path: 'overview', component: OverviewComponent },
    { path: 'profile', component: ProfileComponent },
];

Main routes in app.routing.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

Within the /layouts directory, I create the following layout structure:

/layouts/secure.component.ts

/layouts/secure.component.html

/layouts/public.component.ts

/layouts/public.component.html

All traffic flows through either the public or secure layout, with the [Guard] reserved for secure routes only.

Moreover, I handle authentication utilizing a token stored locally.

@Injectable()
export class Guard implements CanActivate {

    constructor(protected router: Router, protected auth: Auth ) {}

     canActivate() {
        if (localStorage.getItem('access_token')) {
            // logged in so return true
            return true;
        }
        // not logged in so redirect to login page
        this.router.navigate(['/home']);
        return false;
    }
}

Once I configure my setup as detailed above, I organize all secure routes under the secure directory and public routes under the public directory. Route definitions are written in the respective public.routes.ts or secure.routes.ts file within their designated folder.

By consolidating my global guards into a router event listener, I was able to extend their coverage across multiple modules seamlessly.

To ensure that the event listener triggers for all requests, I incorporated it within the AppComponent.

It's important to note that even with this setup, you can still include custom guards for specific routes and they will function as intended.

Bypassing Guards

You have the option to eliminate the use of guards and handle the logic directly within the event listener.

// Code snippet showcasing how to manage authentication without guards
// This example assumes usage of an AuthenticationService
import { Component, OnInit } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
      private router: Router,
      private authService: AuthenticationService
  ) {}

  ngOnInit() {
    // Event listener set up to handle authentication
    this.router.events
    .filter(event => event instanceof RoutesRecognized)
    .subscribe((event: RoutesRecognized) => {
      const url = event.urlAfterRedirects;

      if (url === '/public' || url.startsWith('/public/') || url.startsWith('/public?')) {
        return;
      }

      if (!this.authService.isAuthenticated()) {
        this.router.navigate(['/public/login'], { queryParams: { returnUrl: state.url } });
      }
    });
  }
}

Requests directed to sub-pages under /public will proceed freely, while other requests require authentication or get redirected to /public/login.

Ensure that the redirect page is not within the protected area to prevent looping issues.

Utilizing Existing Guards

In the following implementation, I demonstrate how to leverage existing guards to maintain code cleanliness or adherence to specific requirements.

// Implementation showcasing reusage of existing guards for added protection
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, RoutesRecognized, CanActivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/filter';

// Importing previously defined guards
import { AdminGuard, AuthGuard } from './_guards/index';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(
      private route: ActivatedRoute,
      private router: Router,
      private adminGuard: AdminGuard,
      private authGuard: AuthGuard
  ) {}

  ngOnInit() {
    this.router.events
    .filter(event => event instanceof RoutesRecognized)
    .subscribe((event: RoutesRecognized) => {
      if (this.isSubPage(event, '/public')) {
        return;
      }

      if (!this.callCanActivate(event, this.authGuard)) {
        return;
      }

      if (this.isSubPage(event, '/admin')) {
        if (!this.callCanActivate(event, this.adminGuard)) {
          return;
        }
      }
    });
  }

  callCanActivate(event: RoutesRecognized, guard: CanActivate) {
    return guard.canActivate(this.route.snapshot, event.state);
  }

  isSubPage(event: RoutesRecognized, parent: string) {
    const url = event.urlAfterRedirects;
    return (url === parent
        || url.startsWith(parent + '/')
        || url.startsWith(parent + '?'));
  }
}

This modified version includes additional safeguards specifically targeting the /admin section to enforce administrative authorization in addition to general authentication requirements.