Comment géreriez-vous les rôles et les permissions des utilisateurs en utilisant Angular 2?

Comme mentionné dans les commentaires à votre question, une réponse complète est au-delà de la portée d'une question/réponse, et vous pouvez trouver votre question fermée dans un avenir proche, pour cette raison, mais voici quelques suggestions pour vous d'explorer plus loin sur votre propre:

• obtenir les permissions de l'utilisateur du serveur pendant/après la connexion via http/https. Stockez ces permissions quelque part qui a du sens pour votre application, peut-être dans un service. Si vous utilisez JWT, le les permissions peuvent être retournées dans le token JWT.

• pour simplifier les choses, ne traiter que les permissions sur le client. Les rôles sont pour le code serveur de comprendre quelles permissions l'Utilisateur a. Pas besoin de tout gâcher en conflant les rôles avec les permissions sur le client.

• Protéger les routes avec auth gardes

• protéger les éléments individuels de L'UI avec *ngIf ou ngSwitch / *ngSwitchCase

• Dynamique Le chargement est un grand sujet - aller lire à ce sujet - beaucoup de ressources sur le web. Cependant, pour autant que je sache, bien que vous puissiez paresseusement charger des modules, ils doivent être connus de l'application au moment de la compilation. Je me trompe peut-être, mais je ne pense pas qu'on puisse charger ce qu'on veut à l'exécution.

Cette question est assez large et je ne pense pas que vous pouvez couvrir facilement dans cette réponse. Il y a essentiellement trois choses qui y sont attachées

• Routage
• Gardes
• Modules

vous devez avoir un seul module de garde qui vérifiera pour l'application entière et toutes les routes secondaires seront des enfants pour la route de garde . En bref, il agira comme un garde mondial pour l'ensemble de votre application . Et votre routage sera couvert en bref . Plus sur Gardes

et maintenant, en parlant des modules, vous devez tout diviser en modules communs et en modules présentés et réutiliser les modules ou les utiliser de façon indépendante. Cela vous aidera à le vendre comme un CMS . Plus sur Modules .

Remarque: - Ce n'est pas une réponse exacte, mais un résumé de votre problème

alors j'ai dû mettre en oeuvre quelque chose comme ça sur une application que j'ai travaillée, c'est comme ça que je l'ai fait.

j'ai créé un service auth, celui-ci contenait une méthode qui vérifiait si l'utilisateur avait un rôle de gestion:

auth.service.ts

public isManager(): boolean {
    let isManager = false;
    let user = this.getUserToken();
    //Stored my allowed groups in a config file, comma separated string
    let allowedGroups = AuthenticationParams.filters.split(',');
    let userGroups: any;
    if (user !== null && user !== undefined) {
      try {
        let userGroups: any = user.role;
        if (userGroups !== undefined && userGroups !== null && userGroups.length > 0) {
          try {
            userGroups.forEach((e: any) => {
              if (allowedGroups.indexOf(e) > -1) {
                isManager = true;
              }
            });
          } catch (e) {
            if (allowedGroups.indexOf(userGroups) > -1) {
              isManager = true;
            }
          }
        }
      } catch (e) {
        isManager = false;
      }
    }
    return isManager;
}

public getUserToken(): any {
    return localStorage.getItem('jwtTokenName');
}

j'ai créé un auth garde comme suit:

garde.composant.ts

import { Injectable, OnInit } from '@angular/core';
import { CanActivate, CanActivateChild } from '@angular/router';
import { Router } from '@angular/router'; 
import { AuthenticationService } from '../services/helper/security/auth.service';

@Injectable()
export class GuardComponent implements CanActivate {

  constructor(private authenticationService: AuthenticationService, private _router: Router) {
  }

  canActivate() {
    let isManager: boolean = this.authenticationService.isManager();
    if (!isManager) {
      this._router.navigate(['unauthorized']);
    }
    return isManager;
  }
}

garde.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuardComponent } from './guard.component';

@NgModule({
  declarations: [],
  imports: [ CommonModule ],
  exports: [],
  providers: [ GuardComponent ],
})
export class GuardModule { }

j'ai alors utilisé le garde pour mon itinéraire qui gère la navigation à la section admin

app-routage.module.ts

{ path: 'management', component: AdminComponent, canActivate: [GuardComponent] }

sur ma barre de navigation j'appelle juste le isManager méthode et stockées dans une variable et l'utiliser pour déterminer si oui ou non la gestion du lien doit être affiché ou non.

barre de navigation.composant.ts

public isManager: boolean = false;

ngOnInit(): void {
    this.isManager = this.authenticationService.isManager();
}

barre de navigation.composant.html

<li [routerLinkActive]="['active']" *ngIf="isManager"><a [routerLink]="['management']">Management Portal</a></li>

j'ai dû supprimer certains les données de chaque méthode, mais cela vous donnera une idée de base. Espérons que cela aide.