Passar parâmetro para guarda de rota

Estou trabalhando em um aplicativo que tem várias funções e preciso usar guardas para bloquear a navegação em partes do aplicativo com base nessas funções. Sei que posso criar classes de guarda individuais para cada função, mas preferiria ter uma classe para a qual pudesse de alguma forma passar um parâmetro. Em outras palavras, gostaria de ser capaz de fazer algo semelhante a isto:

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

Mas, como tudo que você passa é o nome do tipo do seu guarda, não consigo pensar em uma maneira de fazer isso. Devo apenas controlar a bala e escrever as classes de guarda individuais por função e destruir minha ilusão de elegância em ter um único tipo parametrizado?

Em vez de usar forRole(), você pode fazer o seguinte:

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

e use isso em seu RoleGuard

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

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

Aqui está minha opinião sobre isso e uma possível solução para o problema do provedor ausente.

No meu caso, temos um guarda que leva uma permissão ou lista de permissões como parâmetro, mas é a mesma coisa ter uma função.

Temos uma aula para lidar com os guardas de autenticação com ou sem permissão:

@Injectable()
export class AuthGuardService implements CanActivate {

    checkUserLoggedIn() { ... }

Trata-se de verificar a sessão ativa do usuário, etc.

Ele também contém um método usado para obter uma proteção de permissão personalizada, que na verdade depende do AuthGuardServicepróprio

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

Isso nos permite usar o método para registrar alguns guardas personalizados com base no parâmetro de permissões em nosso módulo de roteamento:

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

A parte interessante disso forPermissioné AuthGuardService.guards.push- basicamente, isso garante que a qualquer momento que forPermissionsfor chamado para obter uma classe de guarda personalizada, ela também a armazenará neste array. Isso também é estático na classe principal:

public static guards = [ ]; 

Então, podemos usar essa matriz para registrar todos os guardas - isso está ok, contanto que tenhamos certeza de que, no momento em que o módulo de app registra esses provedores, as rotas foram definidas e todas as classes de guarda foram criadas (por exemplo, verificar a ordem de importação e mantenha esses provedores o mais baixo possível na lista - ter um módulo de roteamento ajuda):

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

Espero que isto ajude.

A solução de @AluanHaddad está apresentando o erro "nenhum provedor". Aqui está uma solução para isso (parece sujo, mas não tenho as habilidades para fazer um melhor).

Conceitualmente, eu registro, como um provedor, cada classe gerada dinamicamente criada por roleGuard .

Portanto, para cada função verificada:

canActivate: [roleGuard('foo')]

Você devia ter:

providers: [roleGuard('foo')]

No entanto, a solução no estado em que se encontra de @AluanHaddad gerará uma nova classe para cada chamada a roleGuard, mesmo se o rolesparâmetro for o mesmo. Usando lodash.memoizea aparência:

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

Observe que cada combinação de funções gera uma nova classe, então você precisa se registrar como um provedor cada combinação de funções. Ou seja, se você tem:

canActivate: [roleGuard('foo')] e canActivate: [roleGuard('foo', 'bar')] você terá que registrar ambos:providers[roleGuard('foo'), roleGuard('foo', 'bar')]

Uma solução melhor seria registrar provedores automaticamente em uma coleção global de provedores internos roleGuard, mas como eu disse, não tenho as habilidades para implementar isso.