Wie implementiert man ACL/rollenbasierte Autorisierung mit Winkel 2?

Question

Was ist der beste Weg, um ACL/Papier-basierte mit Winkel 2 zu implementieren?

Mein Szenario, kurz gesagt, ist dies: Die Rollen sind dynamisch und basieren auf den Berechtigungen, die der Client konfigurieren kann, die auch dynamisch sein können.

Ich muss verhindern, dass der Benutzer Zugriff auf eine bestimmte Ressource hat, zu der er nicht berechtigt ist. Dazu dachte ich an das Konzept der Guards of the Angular. Mit CanActivate Guard konnte ich basierend auf den Informationen, die ich in jede Route setzen würde, festlegen, ob der Benutzer passieren darf oder nicht. Diese Information wäre der Name der Ressource, auf die sich diese Route bezieht. Als ich zur Wache kam, konnte ich mich mit seiner Rolle vergleichen und sehen, ob seine Rolle Zugang zu dieser Funktion hat und ob sie die Navigation erlauben soll oder nicht.

Aber mit diesem in könnte in zwei weitere Probleme fallen:

1 - So wird der Benutzer auf eine Ressource umzuleiten, die er Zugriff hat? Müsste ich die Routendateien auflisten und nach jemandem suchen, der mit seiner Rolle kompatibel ist und ihn dann umleiten kann?

2 - Wie Sie Komponenten deaktivieren, die auf Seiten, auf die sie zugreifen kann, nicht angezeigt werden können? Zum Beispiel hat es Zugriff auf die Listing-Seite X, aber es hat keinen Zugriff, um ein neues Objekt zu erstellen, also muss ich die Schaltfläche "Etwas erstellen" entfernen. Oder besser gesagt, wie geht das mit divs-Elementen, die bestimmte Informationen für einige Rollen enthalten, aber nicht für die Rolle von divs?

Ich würde gerne wissen, wie man dieses Szenario innerhalb des eckigen Ökosystems am besten angehen kann.

Danke fürs Zuhören.

Answer 1

Sie können versuchen, ngx-permissions Bibliothek dafür zu verwenden. Es unterstützt dann, sonst Syntax, Lazy Loading, isoliert Lazy Loading. die Bibliothek zum Projekt hinzu:

@NgModule({ 

imports: [ 
    NgxPermissionsModule.forRoot() 
] 
}) 
export class AppModule { } 

Lastrollen

NgxRolesService 
.addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB']) 

NgxRolesService.addRole('Guest',() => { 
    return this.sessionService.checkSession().toPromise(); 
}); 

NgxRolesService.addRole('Guest',() => { 
    return true; 
}); 

Verwendung in Vorlagen

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']"> 
    <div>You can see this text congrats</div> 
</div> 

Ihre Wache schützen

const appRoutes: Routes = [ 
{ path: 'home', 
component: HomeComponent, 
canActivate: [NgxPermissionsGuard], 
data: { 
    permissions: { 
    only: ['ADMIN', 'MODERATOR'], 
    except: ['GUEST'] 
    } 
    } 
}, 
]; 

Für detaillierte Dokumentation Kasse wiki page.

Answer 2

prüfen CASL gibt es Artikel über Integration in Vue und Aurelia aber für Angular 2+ Implementierung sehr ähnlich

pro Leitgedanke, die Sie Fähigkeiten definieren können Benutzer

import { AbilityBuilder } from 'casl' 


// allow to read and create Todo-s for everybody and update for assignees 
export default AbilityBuilder.define(can => { 
    can(['read','create'], 'Todo') 
    can(['update'], 'Todo', { assignee: user.id }) 
}) 

Es kann auch sein sollte, ein Artikel in Dokumentation über wie man map abilities to different roles