Pase el parámetro a la protección de ruta

Estoy trabajando en una aplicación que tiene muchos roles que necesito para usar guardias para bloquear la navegación a partes de la aplicación según esos roles. Me doy cuenta de que puedo crear clases de guardia individuales para cada rol, pero prefiero tener una clase a la que de alguna manera podría pasar un parámetro. En otras palabras, me gustaría poder hacer algo similar a esto:

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

Pero como todo lo que pasa es el nombre del tipo de su guardia, no puedo pensar en una forma de hacerlo. ¿Debería simplemente tomarme la bala y escribir las clases de guardias individuales por rol y romper mi ilusión de elegancia al tener un solo tipo parametrizado en su lugar?

En lugar de usar forRole(), puede hacer esto:

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

y usa esto en tu RoleGuard

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

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

Esta es mi opinión sobre esto y una posible solución para el problema del proveedor que falta.

En mi caso, tenemos un guardia que toma un permiso o lista de permisos como parámetro, pero es lo mismo que tiene un rol.

Tenemos una clase para tratar con los guardias de autenticación con o sin permiso:

@Injectable()
export class AuthGuardService implements CanActivate {

    checkUserLoggedIn() { ... }

Se trata de comprobar la sesión activa del usuario, etc.

También contiene un método que se utiliza para obtener un protector de permisos personalizado, que en realidad depende del AuthGuardServicepropio

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

Esto nos permite usar el método para registrar algunos guardias personalizados basados ​​en el parámetro de permisos en nuestro módulo de enrutamiento:

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

La parte interesante de forPermissiones AuthGuardService.guards.push- esto básicamente se asegura de que cada vez que forPermissionsse llama para obtener una clase de protección a medida que también lo almacenará en esta matriz. Esto también es estático en la clase principal:

public static guards = [ ]; 

Luego, podemos usar esta matriz para registrar todos los guardias; esto está bien siempre y cuando nos aseguremos de que para cuando el módulo de la aplicación registre a estos proveedores, las rutas se hayan definido y todas las clases de guardias se hayan creado (por ejemplo, verificar el orden de importación y mantenga estos proveedores lo más bajo posible en la lista; tener un módulo de enrutamiento ayuda):

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

Espero que esto ayude.

La solución de @ AluanHaddad está dando el error "sin proveedor". Aquí hay una solución para eso (se siente sucio, pero no tengo las habilidades para hacer uno mejor).

Conceptualmente, registro, como proveedor, cada clase generada dinámicamente creada por roleGuard.

Entonces, para cada rol verificado:

canActivate: [roleGuard('foo')]

Deberías:

providers: [roleGuard('foo')]

Sin embargo, la solución de @ AluanHaddad tal como está generará una nueva clase para cada llamada a roleGuard, incluso si el rolesparámetro es el mismo. Usarlo lodash.memoizese ve así:

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

Tenga en cuenta que cada combinación de roles genera una nueva clase, por lo que debe registrarse como proveedor en cada combinación de roles. Es decir, si tienes:

canActivate: [roleGuard('foo')]y canActivate: [roleGuard('foo', 'bar')]tendrás que registrar ambos:providers[roleGuard('foo'), roleGuard('foo', 'bar')]

Una mejor solución sería registrar proveedores automáticamente en una colección de proveedores globales dentro roleGuard, pero como dije, carezco de las habilidades para implementar eso.