CanActivateGuard 并将数据传递到 Guard

Question

我有一个 angular 4 应用程序，并实施了一个保护程序来处理身份验证。我们有不同的模块，使用工厂来创建我们所说的 ThemeService。每个模块都是独立的应用程序，具有自己的风格和安全性。每个模块都告诉 ThemeService 用户必须访问什么角色并且守卫工作正常。

这是守卫：

 export class AuthenticatedGuard implements CanActivate
    {
        constructor (private memSrv:MembershipService,
private themeSrv:ThemeService,private router:Router )
        {
        }
        canActivate(
            route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot
        ): Observable<boolean> | Promise<boolean> | boolean {

            return this.memSrv.GetCurrentUser()
                .map(u => {
                    if (!u) {
                        this.router.navigate([this.themeSrv.LoginUrl]);
                        return false;
                    }
                    var isAuth = u.Capabilities.some(s => s === this.themeSrv.AuthCapability);
                    if (isAuth) {
                        return true;
                    }
                    else {
                        //TODO: This is an unauthorized but authenticated user it should go to an unauthorized page
                        this.router.navigate(["/Unauthorized", { url: state.url }]);
                        return false;
                    }
                }
                );


        }
    }

我现在有一个模块，其中有一些路由需要使用不同的角色来保护。我的问题是如何将必须为每条路由检查的角色传递给 AuthenticationGuard。我不想为我们要检查的每个角色创建不同的守卫。

下面是我的路线配置的片段

   {
        path: "",
        component: Component.MainComponent, 
        children:
        [
            {
                path: 'attachmentsTest',
                component: Component.AttachmentsTestComponent,
            },
            {
                path:"home",
                component: Component.HomeComponent,
                canActivate: [AuthenticatedGuard],
                resolve: {
                    user: CurrentUserResolver
                }
            },

Answer 1

是的，您可以将值放入路由配置中，以便稍后使用 data 属性提取。这是一个例子：

@NgModule({
  imports: [
    RouterModule.forChild([
      { 
        path: 'products',
        component: ProductListComponent,
        data: { pageTitle: 'Product List' }
      },
      { path: 'products/:id', component: ProductDetailComponent },
      { path: 'products/:id/edit', component: ProductEditComponent }
    ])
  ],  // ...

注意这里的数据属性。

然后您可以使用如下语法阅读属性：

this.pageTitle = this.route.snapshot.data['pageTitle'];

CanActivateGuard 并将数据传递到 Guard

CanActivateGuard and passing data into the Guard

angular

angular-router-guards