Angulaire 2 les rôles et les autorisations

J'ai utilisé angular2 et laravel 5.3 dans mon projet. dans laravel lorsque l'utilisateur est connecté au serveur va envoyer les autorisations de l'utilisateur pour gérer l'autorisation angulaire. j'ai donc écrit un garde pour protéger les itinéraires des utilisateurs qui ne peuvent pas accéder.
voici ma garde code de classe:

export class AccessGuard implements CanActivate{

permissions;
currentRoute;
constructor(private authService:AuthService,private router:Router){
    this.permissions = this.authService.getPermissions();
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.checkHavePermission(state.url);
}

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.checkHavePermission(state.url);
}

private checkHavePermission(url){
    switch (true) {
        case url.match(/^\/panel\/users[\/.*]?/):
            return this.getPermission('user.view');
        case url.match(/^\/panel\/dashboard/):
            return true;
        case url.match(/^\/panel\/permissions/):
            return this.getPermission('permissions.manager');
        case url.match(/^\/panel\/candidates[\/.*]?/):
            return this.getPermission('candidate.view');
    }
}


getPermission(perm){
    for(var i=0;i<this.permissions.length;i++){
        if(this.permissions[i].name == perm ){
            return true;
        }
    }
    return false;
}

}

Maintenant que les itinéraires sont sécurisées je me demandais comment puis-je accéder à l'autorisation de l'utilisateur à l'intérieur de la classe du composant. Parce que parfois, l'utilisateur peut accéder à une route, mais il ne peut pas voir une partie spécifique des dom. comment puis-je gérer ce genre de situation?

OriginalL'auteur Hossein Ahmadi | 2016-09-28

  1. 6

    Vous devez conserver les autorisations dans le service lui-même au lieu de dans le garde.

    Ainsi, lorsque l'utilisation authentifie, vous pouvez stocker la permission dans une propriété du Service d'Authentification. Puis dans la garde, vous appelez la this.authService.<property> utiliser la permission. Dans tous les autres composants, vous pouvez faire la même chose, this.authService.<property> pour obtenir la permission de l'utilisateur niveau

    Depuis que le service sera passé autour comme un singleton, tous les composants ont accès à la même propriété.

    merci pour votre réponse. Mais lorsque l'utilisateur de recharger la page à ce sujet. Je pensais que sauver les autorisations dans le local de stockage, mais il n'est pas sécurisée. ce que vous suggérez?
    Local de Stockage/Stockage de Session serait votre option pour cela, mais seulement en magasin ce dont vous avez besoin, clairement pas le nom d'utilisateur/mot de passe combo. Je suis sûr qu'il y aurait un moyen de le faire avec quelque chose comme JWT, mais je n'ai aucune expérience avec encore.
    JWT est la tendance à la méthode de stockage de l'authentification sécurisée sur le client.

    OriginalL'auteur Dave V

  2. 4

    Basé sur l' @Dave V de réponse, vous pouvez mettre en place votre propre "peut" qui fait un peu le code plus lisible. Par exemple:

    @Injectable()
export class UserCan {

  constructor (private _auth: AuthService)
  {

  }

  public canDoWhatever()
  {
    return (this._auth.roles.indexOf("Whatever") > -1);
  }

}

    Et dans votre Component s, vous pouvez injecter:

    export class YourComponent {
  private canDoWhatever: boolean;

  constructor(private _userCan: UserCan) {
    this.canDoWhatever = _userCan.canDoWhatever();
  }

}

    Et enfin dans votre code html:

    <div *ngIf="canDoWhatever">
    Je voudrais savoir si c'est la meilleure façon, car il a l'air génial et nettoyeur

    OriginalL'auteur jos

  3. 3

    Pour quelqu'un qui est à la recherche de la bibliothèque, vous pouvez consulter ngx-autorisations. Il permet de supprimer un élément du DOM, paresseux module compatible, isolé module compatible, d'autre puis syntaxe est pris en charge.

    Ajouter de la bibliothèque

      @NgModule({

  imports: [
    BrowserModule,
     NgxPermissionsModule.forRoot()
  ],

})
export class AppModule { }

    Charge des autorisations

    constructor(private permissionsService: NgxPermissionsService,
       private http: HttpClient) {}

ngOnInit(): void {
    const perm = ["ADMIN", "EDITOR"];

    this.permissionsService.loadPermissions(perm);

     this.http.get('url').subscribe((permissions) => {
       //const perm = ["ADMIN", "EDITOR"]; example of permissions
       this.permissionsService.loadPermissions(permissions);
    })
  }

    Les modèles, les 

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

    Pour une meilleure documentation, reportez-vous page wiki.

    OriginalL'auteur alexKhymenko