Table of Contents

NGSuite: Serial Guard

NGSuite's SerialGuard is a feature that makes it possible to call multiple route guards in tandem. There are two types of Serial Guard: The SerialGuard decorator and the SerialGuardFn function. Both the SerialGuard decorator and the SerialGuardFn accept the SerialGuardInfo object as an argument.

Creating a Guard Entry

import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";

export class AuthGuardEntry implements GuardEntry {

  invoke(route: ActivatedRouteSnapshot, state: RouterStateSnapshot, data: GuardDataInterface): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    ...
    return true;
  }

}

Using the SerialGuard Decorator

The SerialGuard decorator is used with a class to generate a master route guard that chains up the guard entries for serial execution.

Example

Creating a serial guard with the SerialGuard decorator: 

@SerialGuard({
  entries: [
    AuthGuardEntry,
    SecondGuardEntry,
    ThirdGuardEntry
  ],
  providers: []
})
export class UserAccessGuard { }

Using the SerialGuardFn Function

The SerialGuardFn function generates a master route guard that chains up the guard entries for serial execution.

Example

Creating a serial guard with the SerialGuardFn function: 

export const UserAccessGuard = SerialGuardFn({
  entries: [
    AuthGuardEntry,
    SecondGuardEntry,
    ThirdGuardEntry
  ],
  providers: []
});

Applying the Serial Guard

const routes: Routes = [
  {
    path: '',
    component: AccessPage,
    canActivateChild: [ UserAccessGuard ],
    children: [
      {
        path: '',
        redirectTo: 'signin',
        pathMatch: 'full'
      },
      ...
      {
        path: 'signup',
        component: AccessSignupPage,
        canActivate: [ UserAccessGuard ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }