ルートガードにパラメーターを渡す

私は、それらの役割に基づいてアプリの一部へのナビゲーションをブロックするためにガードを使用する必要がある多くの役割を持つアプリに取り組んでいます。役割ごとに個別のガードクラスを作成できることはわかっていますが、パラメーターを渡すことができるクラスを1つ持つほうがよいと思います。つまり、次のようなことができるようになりたいと思います。

{ 
  path: 'super-user-stuff', 
  component: SuperUserStuffComponent,
  canActivate: [RoleGuard.forRole('superUser')]
}

ただし、渡すのはガードのタイプ名だけなので、その方法を考えることはできません。弾丸を噛んで役割ごとに個別のガードクラスを記述し、代わりに単一のパラメーター化された型を持つことによる優雅さの錯覚を打ち砕く必要がありますか？

を使用する代わりにforRole()、これを行うことができます：

{ 
   path: 'super-user-stuff', 
   component: SuperUserStuffComponent,
   canActivate: RoleGuard,
   data: {roles: ['SuperAdmin', ...]}
}

これをRoleGuardで使用します

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
    : Observable<boolean> | Promise<boolean> | boolean  {

    let roles = route.data.roles as Array<string>;
    ...
}

これが私の見解であり、不足しているプロバイダーの問題に対する可能な解決策です。

私の場合、許可または許可のリストをパラメーターとして受け取るガードがありますが、これは役割を持つのと同じことです。

許可の有無にかかわらず、認証ガードを処理するためのクラスがあります。

@Injectable()
export class AuthGuardService implements CanActivate {

    checkUserLoggedIn() { ... }

これは、ユーザーのアクティブセッションの確認などを扱います。

また、実際にはAuthGuardService自身に依存しているカスタム許可ガードを取得するために使用されるメソッドも含まれています

static forPermissions(permissions: string | string[]) {
    @Injectable()
    class AuthGuardServiceWithPermissions {
      constructor(private authGuardService: AuthGuardService) { } // uses the parent class instance actually, but could in theory take any other deps

      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        // checks typical activation (auth) + custom permissions
        return this.authGuardService.canActivate(route, state) && this.checkPermissions();
      }

      checkPermissions() {
        const user = ... // get the current user
        // checks the given permissions with the current user 
        return user.hasPermissions(permissions);
      }
    }

    AuthGuardService.guards.push(AuthGuardServiceWithPermissions);
    return AuthGuardServiceWithPermissions;
  }

これにより、このメソッドを使用して、ルーティングモジュールの権限パラメーターに基づいていくつかのカスタムガードを登録できます。

....
{ path: 'something', 
  component: SomeComponent, 
  canActivate: [ AuthGuardService.forPermissions('permission1', 'permission2') ] },

の興味深い部分forPermissionはAuthGuardService.guards.push-これは基本的にforPermissions、カスタムガードクラスを取得するために呼び出されたときに、この配列にも保存されることを確認します。これはメインクラスでも静的です。

public static guards = [ ]; 

次に、この配列を使用してすべてのガードを登録できます。これは、アプリモジュールがこれらのプロバイダーを登録するまでにルートが定義され、すべてのガードクラスが作成されていることを確認している限り問題ありません（たとえば、インポート順序を確認し、これらのプロバイダーをリストでできるだけ低く保つ-ルーティングモジュールがあると便利です）：

providers: [
    // ...
    AuthGuardService,
    ...AuthGuardService.guards,
]

お役に立てれば。

@AluanHaddadのソリューションは「プロバイダーなし」エラーを出します。これを修正します（汚れているように感じますが、より良いものを作成するスキルがありません）。

概念的には、によって作成された動的に生成された各クラスをプロバイダーとして登録しroleGuardます。

したがって、チェックされたすべての役割について：

canActivate: [roleGuard('foo')]

あなたが持っているべきです：

providers: [roleGuard('foo')]

ただし、@ AluanHaddadのソリューションは、パラメーターが同じroleGuardであっても、rolesそのままの呼び出しで新しいクラスを生成します。これを使用するlodash.memoizeと、次のようになります。

export var roleGuard = _.memoize(function forRole(...roles: string[]): Type<CanActivate> {
    return class AuthGuard implements CanActivate {
        canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
            Observable<boolean>
            | Promise<boolean>
            | boolean {
            console.log(`checking access for ${roles.join(', ')}.`);
            return true;
        }
    }
});

ロールの組み合わせごとに新しいクラスが生成されるため、ロールの組み合わせごとにプロバイダーとして登録する必要があることに注意してください。つまり、あなたが持っている場合：

canActivate: [roleGuard('foo')]そしてcanActivate: [roleGuard('foo', 'bar')]あなたは両方を登録する必要があります：providers[roleGuard('foo'), roleGuard('foo', 'bar')]

より良い解決策は、内のグローバルプロバイダーコレクションにプロバイダーを自動的に登録することですroleGuardが、前述したように、それを実装するスキルが不足しています。