Angular 4 Multiple Guards-执行顺序 [英] Angular 4 Multiple Guards - Execution Sequence

问题描述

我在应用程序中有2个防护，AuthGuard和AccessGuard. AuthGuard顾名思义保护所有页面，并将会话对象存储在GlobalService中，而AccessGuard则取决于AuthGuard在GlobalService中存储的会话对象中的某些访问数据.

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.

当AuthGuard返回一个Observable，然后同时AccessGuard执行以检查尚未到达的会话对象并且代码中断时，就会出现问题. 还有其他方法可以限制AccessGuard的执行，直到会话对象到达或任何其他解决方法来打破这种竞争状态?

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. 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?

#Note 我没有将AccessGuard逻辑合并到AuthGuard，因为仅需要检查某些路由的访问权限，而其他所有路由都需要身份验证.例如，帐户"页面和数据库"页面可供所有人访问，但用户管理"和仪表板"需要来自会话对象的外部访问参数

#Note 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

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);

#添加保护代码

AuthGuard:

AuthGuard:

canActivate(route:ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean{
  return new Observable<boolean>( observer => {
    this._dataService.callRestful('POST', params.SERVER.AUTH_URL + urls.AUTH.GET_SESSION).subscribe(
        (accessData) => {
          if (accessData['successful']) {
            observer.next(true);
            observer.complete();
            console.log("done");
          }
          else {
            observer.next(false);
            observer.complete();
          }
        });
  });
}

AccessableGuard:

AccessableGuard:

canActivate(route:ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean{        
if(this._dataService.getModulePermission(route.routeConfig.path.toUpperCase()) < 2){
        return false;
      }
      return true;
    }

#NOTE :_dataService是GlobalService，用于存储来自AuthGuard的访问权限.

#NOTE: _dataService is GlobalService that stores the Access Permissions from AuthGuard.

推荐答案

看看此Angular指南(

Take a look at this Angular guide (link). "If you were using a real world API, there might be some delay before the data to display is returned from the server. You don't want to display a blank component while waiting for the data.

最好从服务器中预取数据，以便在激活路由后就可以准备好了.这也使您可以在路由到组件之前处理错误...

It's preferable to pre-fetch data from the server so it's ready the moment the route is activated. This also allows you to handle errors before routing to the component...

总而言之，您希望延迟呈现路由的组件，直到获取所有必需的数据为止.

In summary, you want to delay rendering the routed component until all necessary data have been fetched.

您需要一个解析器."

You need a resolver."

这篇关于Angular 4 Multiple Guards-执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！