title: Angular 4 Multiple Guards - Execution Sequence
body: <p>I have 2 guards, AuthGuard and AccessGuard in the application.
  AuthGuard protects all the pages as the name suggests and stores the session object in the GlobalService and AccessGuard depends on the some access data in session object stored by AuthGuard in GlobalService.</p>
  
  <p>Problem arises when AuthGuard returns an Observable and then simultaneously AccessGuard executes to check for session object which has not yet arrived and the code breaks. <strong>Is there any other way I can restrict the execution of AccessGuard until the session object arrives or any other work around to break this race condition?</strong></p>
  
  <p><strong>#Note</strong> I have not merged the AccessGuard logic to AuthGuard as only some of the routes need to be checked for access while all other needs authentication. For example, Accounts page and DB page are accessible to all but User Managements and Dashboard need external access parameters that come from session object</p>
  
  <pre><code>export const routes: Routes = [
    {
      path: 'login',
      loadChildren: 'app/login/login.module#LoginModule',
    },
    {
      path: 'logout',
      loadChildren: 'app/logout/logout.module#LogoutModule',
    },
    {
      path: 'forget',
      loadChildren: 'app/forget/forget.module#ForgetModule',
    },{
      path: 'reset',
      loadChildren: 'app/reset/reset.module#ResetModule',
    },
  
      path: 'pages',
      component: Pages,
      children: [
        { path: '', redirectTo: 'db', pathMatch: 'full' },
        { path: 'db', loadChildren: 'app/pages/db/db.module#DbModule' },
        { path: 'bi', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule', canActivate:[AccessableGuard] },
        { path: 'account', loadChildren: 'app/pages/account/account.module#AccountModule' },
        { path: 'um', loadChildren: 'app/pages/um/um.module#UserManagementModule', canActivate:[AccessableGuard] },
      ],
      canActivate: [AuthGuard]
    }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forChild(routes);
  </code></pre>
  
  <p><strong>#EDIT: Adding the Guard Codes</strong></p>
  
  <p>AuthGuard:</p>
  
  <pre><code>canActivate(route:ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt; | boolean{
    return new Observable&lt;boolean&gt;( observer =&gt; {
      this._dataService.callRestful('POST', params.SERVER.AUTH_URL + urls.AUTH.GET_SESSION).subscribe(
          (accessData) =&gt; {
            if (accessData['successful']) {
              observer.next(true);
              observer.complete();
              console.log("done");
            }
            else {
              observer.next(false);
              observer.complete();
            }
          });
    });
  }
  </code></pre>
  
  <p>AccessableGuard:</p>
  
  <pre><code>canActivate(route:ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt; | boolean{        
  if(this._dataService.getModulePermission(route.routeConfig.path.toUpperCase()) &lt; 2){
          return false;
        }
        return true;
      }
  </code></pre>
  
  <p><strong>#NOTE</strong>: _dataService is GlobalService that stores the Access Permissions from AuthGuard.</p>