Übergeben Sie parameter in der route guard

Arbeite ich an einer app, die eine Menge von Rollen, die ich verwenden müssen, die Wachen zu blockieren, die navigationssteuerung, um Teile der app basierend auf diesen Rollen. Ich weiß, ich kann einzelne Wache Klassen für jede Rolle, würde aber eher eine Klasse, die konnte ich irgendwie übergeben Sie einen parameter an. In anderen Worten: ich möchte in der Lage sein, etwas zu tun ähnlich wie diese:

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

Aber da alles, was Sie übergeben, ist der name Ihrer Wache, kann nicht denken Sie an einen Weg, das zu tun. Soll ich einfach bisschen die Kugel und schreiben der einzelnen Klassen guard pro Rolle und zerbrechen meine illusion von Eleganz, mit einer einzigen parametrisierten Typ statt?

InformationsquelleAutor Brian Noyes | 2017-03-10
  1. 128

    Müssen Sie dies tun.

    Statt mit forRole() sind, sollten Sie die Nutzung dieser: 

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

    und verwenden Sie diese in Ihrem RoleGuard

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

    let roles = route.data.roles as Array<string>;
    ...
}
    • Gute option als gut, vielen Dank. Ich mag Aluan die factory-Methode nur eine Spur etwas besser, aber danke für die Erweiterung meines Gehirns auf die Möglichkeiten!
    • Ist das denn sicher? kann jemand nur die post diese Daten?
    • Ich denke, dass die Sicherheit dieser Daten ist irrelevant. Sie haben die Verwendung von Authentifizierung und Autorisierung auf server-Seite. Ich thinkg der Punkt, der Garde ist nicht vollständig schützen Sie Ihre Anwendung. Wenn jemand "hacks" und navigiert zu der admin-Seite, er/Sie wird nicht erhalten die Daten aus dem server, nur einfach sehen, Sie admin-Komponenten, die ist meiner Meinung nach ok. Ich denke, das ist viel mehr eine bessere Lösung, die das akzeptiert man. Die akzeptierte Lösung bricht die dependency injection.
    • Dies ist eine gute Lösung und es funktioniert Super in meinem generic AuthGuard.
    • Gute Lösung, aber was ist, wenn ich verwenden möchten, die RoleGuard zweimal (oder beliebig)? Es ist eher anfügen Beheben, { user1: UserResolver(1), user2: UserResolver(2) }. Natürlich, ich möchte in der Lage sein zu verwenden-Attribut name, und eine beliebige Anzahl von Wachen oder resolver. Sieht aus wie es ist ein design-Mangel Beheben mit & Guard.
    • ok, Wie testen Sie das? const canActivate = <Versprechen<boolean>>authGuard.canActivate(); //Fehler-parameter erwarten canActivate.dann ist(isConnected => erwarten(isConnected).toBeFalsy());
    • Diese Lösung funktioniert Super. Mein Problem ist, dass es stützt sich auf eine Schicht der Dereferenzierung. Es gibt keine Möglichkeit, jemanden, der sich an diesem code erkennen würden, dass roles Objekt und die route guard verknüpft sind, ohne zu wissen, wie der code funktioniert, vor der Zeit. Es nervt, dass Eckig nicht unterstützt, ist ein Weg, dies zu tun in einer deklarativer Weise. (Zu sein klar, das ist mir beklagt Winkel nicht diese durchaus vernünftige Lösung.)
    • danke, ja aber ich habe diese Lösung viel Zeit und ging ich zu einer anderen Lösung. Meine neue Lösung ist eine RoleGaurd und eine Datei mit "Zugriff.ts" Namen mit Karte<URL AccessRoles> ständig daran, dann ich benutze es in RoleGaurd. Wenn Sie möchten, Steuern Sie Ihre Zugriffe in Ihrer app, und ich denke, dass dieser neue Weg ist viel besser, vor allem, wenn Sie mehr als eine app in einem Projekt.

    InformationsquelleAutor Hasan Beheshti
  2. 6

    Hier ist mein nehmen auf diese und eine mögliche Lösung für die fehlenden provider Problem.

    In meinem Fall, wir haben einen Wächter, der braucht eine Erlaubnis oder eine Liste von Berechtigungen als parameter, aber es ist die gleiche Sache hat mit eine Rolle.

    Haben wir eine Klasse für den Umgang mit auth Wachen mit oder ohne Erlaubnis:

    @Injectable()
export class AuthGuardService implements CanActivate {

    checkUserLoggedIn() { ... }

    Diese befasst sich mit der überprüfung Benutzer aktive Sitzungen, etc.

    Es enthält auch eine Methode verwendet, um eine benutzerdefinierte Berechtigung guard, das ist sogar abhängig von der AuthGuardService sich

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

    Dies ermöglicht es uns, verwenden Sie die Methode zum registrieren einige eigene Wachen basierend auf den Berechtigungen parameter in unserer routing-Modul:

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

    Der interessante Teil forPermission ist AuthGuardService.guards.push - diese im Grunde stellt sicher, dass jederzeit forPermissions aufgerufen wird, erhalten Sie eine eigene Wache-Klasse es wird auch speichern Sie Sie in diesem array. Dies ist auch statisch in der main-Klasse:

    public static guards = [ ];

    Dann wir können dieses array verwenden, um zu registrieren, alle Wachen - das ist ok, solange wir sicherstellen, dass durch die Zeit, die die app-Modul registriert, diese Anbieter, die Routen definiert war und alle guard-Klassen geschaffen worden (z.B. Scheck-import-Ordnung und halten diese Anbieter so niedrig wie möglich in der Liste - mit einem routing-Modul hilft):

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

    Hoffe, das hilft.

    • Diese Lösung gibt mir eine statische Fehler: FEHLER-Fehler beim auflösen von symbol Werte statisch.
    • Diese Lösung funktionierte für mich für die Entwicklung, aber wenn ich die Anwendung erstellen für die Produktion in wirft Fehler ERROR in Error during template compile of 'RoutingModule' Function calls are not supported in decorators but 'PermGuardService' was called.
    • Funktioniert das mit faul Module geladen, die Ihre eigenen routing-Module?
    InformationsquelleAutor Ovidiu Dolha
  3. 0

    @AluanHaddad s Lösung ist die Angabe "kein Anbieter" Fehler. Hier ist ein fix für die, die (es fühlt sich schmutzig, aber mir fehlen die Fähigkeiten, um eine bessere).

    Konzeptionell, ich melde mich, als Anbieter, die jeweils dynamisch generierte Klasse erstellt, die von roleGuard.

    Also für jede Rolle aktiviert:

    canActivate: [roleGuard('foo')]

    sollten Sie haben:

    providers: [roleGuard('foo')]

    Allerdings, @AluanHaddad die Lösung ist-generieren neue Klasse für jeden Aufruf roleGuard, auch wenn roles parameter ist die gleiche. Mit lodash.memoize sieht es wie folgt aus:

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

    Hinweis, jede Kombination von Rollen erzeugt eine neue Klasse, so registrieren Sie sich als Anbieter jeder Kombination von Rollen. I. e. wenn Sie haben:

    canActivate: [roleGuard('foo')] und canActivate: [roleGuard('foo', 'bar')] haben Sie zu registrieren: providers[roleGuard('foo'), roleGuard('foo', 'bar')]

    Eine bessere Lösung wäre, sich zu registrieren Anbieter automatisch in einem globalen Anbieter-Sammlung in roleGuard, aber wie gesagt, mir fehlen die Fähigkeiten, um zu realisieren, dass.

    • Ich mag diesen funktionalen Ansatz, aber mixin-Verschlüsse mit DI(Klassen) Aussehen overhead.
    InformationsquelleAutor THX-1138
Schreibe einen Kommentar