web-dev-qa-db-fra.com

Comment géreriez-vous les rôles et autorisations des utilisateurs avec Angular 2

Je travaille sur une nouvelle application Angular2 et je me demandais comment gérer les itinéraires accessibles à certains rôles et autorisations pour créer, éditer et supprimer des éléments pour certains rôles.

Je veux savoir comment vous résolvez le problème tel que celui-ci:

  • Comment gérez-vous l'accès à certains éléments de l'interface utilisateur? Comment l'application sait-elle l'afficher ou la masquer? Utilisez-vous un seul service pour cela? Ou créez-vous différentes conditions pour les différents endroits de votre application?

  • Comment gérez-vous votre routage? Utilisez-vous CanActivate, CanActivateChild, CanLoad, etc.? Construisez-vous un seul service de garde pour toutes les routes ou créez-vous des services différents pour différents modules ou composants?

  • Et dernière question. Quel est le meilleur moyen de diviser l'application pour pouvoir la vendre comme un CMS? Je veux dire, comment pouvons-nous concrétiser la possibilité de charger d'autres modules du marché, par exemple, et de les ajouter à votre application?

Comment résolvez-vous le même problème?

Toute orientation, expérience ou pointeur de matériel couvrant ces sujets est grandement apprécié. Merci d'avance.

angularpermissionsuser-roles
21
Roman Skydan

Comme mentionné dans les commentaires de votre question, une réponse complète dépasse le cadre d'une question/réponse SO). Votre question peut donc être fermée dans un proche avenir pour cette raison, mais voici: Quelques suggestions rapides à explorer par vous-même:

  • Obtenez les autorisations de l'utilisateur du serveur pendant/après la connexion via http/https. Stockez ces autorisations dans un endroit qui convient à votre application, peut-être dans un service. Si vous utilisez JWT, les autorisations peuvent être renvoyées dans le jeton JWT.

  • Pour simplifier les choses, ne traitez que des autorisations sur le client. Les rôles sont pour le code du serveur pour déterminer les autorisations dont dispose l'utilisateur. Pas besoin de tout gâcher en combinant les rôles avec les autorisations sur le client.

  • Protégez les itinéraires avec des gardes d'autoroutes

  • Protégez les éléments individuels de l'interface utilisateur avec * ngIf ou ngSwitch/* ngSwitchCase

  • Le chargement dynamique est un sujet important - lisez-le à ce sujet - de nombreuses ressources sur le Web. Cependant, autant que je sache, bien que vous puissiez charger des modules paresseusement, ils doivent être connus de l’application au moment de la compilation. Je me trompe peut-être, mais je ne pense pas que vous puissiez charger tout ce que vous voulez au moment de l'exécution.

19
GreyBeardedGeek

J'ai donc dû implémenter quelque chose comme ceci sur une application que j'ai élaborée, voici comment je l'ai traitée.

J'ai créé un service d'authentification, qui 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 garde d'authentification comme suit:

guard.component.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;
  }
}

guard.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 ensuite utilisé la garde pour mon itinéraire qui gère la navigation vers la section admin

app-routing.module.ts

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

Sur ma barre de navigation, j'appelle simplement la méthode isManager, la stocke dans une variable et l'utilise pour déterminer si le lien de gestion doit être affiché ou non.

navbar.component.ts

public isManager: boolean = false;

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

navbar.component.html

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

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

7
Wesley Coetzee

Cette question est assez large et je ne pense pas que vous puissiez la couvrir facilement dans cette réponse. Il y a essentiellement trois choses qui s'y rattachent

  • Routage
  • Gardes
  • Modules

Vous devez avoir un module de garde unique qui vérifie l'application entière et tous les sous-itinéraires seront des enfants pour l'itinéraire de garde. En bref, il agira comme une garde globale pour l’ensemble de votre application. Et votre routage sera couvert en bref. Plus sur Gardes

Et maintenant, en parlant de modules, vous devez tout scinder en modules communs et décrits, puis réutiliser les modules ou les utiliser indépendamment. Cela vous aidera à le vendre comme un CMS. Plus sur Modules .

Remarque - Ce n'est pas une réponse exacte, mais un élément essentiel à votre problème

6
Rahul Singh