====== 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 [[opensource:ngsuite:api:serialguard|SerialGuard]] decorator and the [[opensource:ngsuite:api:serialguardfn|SerialGuardFn]] function. Both the [[opensource:ngsuite:api:serialguard|SerialGuard]] decorator and the [[opensource:ngsuite:api:serialguardfn|SerialGuardFn]] accept the [[opensource:ngsuite:api:serialguardinfo|SerialGuardInfo]] object as an argument.

===== Creating a Guard Entry =====

<codify typescript>
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;
  }

}
</codify>

===== Using the SerialGuard Decorator =====

The [[opensource:ngsuite:api:serialguard|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 [[opensource:ngsuite:api:serialguard|SerialGuard]] decorator:

<codify typescript>
@SerialGuard({
  entries: [
    AuthGuardEntry,
    SecondGuardEntry,
    ThirdGuardEntry
  ],
  providers: []
})
export class UserAccessGuard { }
</codify>

===== Using the SerialGuardFn Function =====

The [[opensource:ngsuite:api:serialguardfn|SerialGuardFn]] function generates a master route guard that chains up the guard entries for serial execution.

==== Example ====

Creating a serial guard with the [[opensource:ngsuite:api:serialguardfn|SerialGuardFn]] function:

<codify typescript>
export const UserAccessGuard = SerialGuardFn({
  entries: [
    AuthGuardEntry,
    SecondGuardEntry,
    ThirdGuardEntry
  ],
  providers: []
});
</codify>

===== Applying the Serial Guard =====

<codify typescript>
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 { }
</codify>