J'utilise une directive structurelle de 7 à 7 angulaires pour masquer des parties de l'application en fonction du rôle utilisateur. Le rôle d'utilisateur est décodé à partir du jeton JWT. Cependant, je rencontre des problèmes. J'ai utilisé la même mise en œuvre avec Angular 6 et n'avait aucun problème, mais rien que j'essaye semble travailler. Si je me connecte en tant qu'administrateur, je dois actualiser le navigateur du lien administrateur pour afficher ou être masqué si je vous connecte à un utilisateur régulier. Le message d'erreur a été affiché ci-dessous et j'ai ajouté le HASROLE.Directive et le lien HTML
NavComponent.html: 2 Type d'erreur: ne peut pas lire le «rôle» de la propriété non définie Chez hasroledirective.push ../ src / app / _directives / hasrole.directive.ts.hasroledirective.ngoninit (hasrole.directive.ts: 17) À CheckandupDatedirectiveInline (Core.Js: 20665) à CheckandupDaTenodeInLine (Core.Js: 21929) à CheckandupDatenode (core.js: 21891) à debugcheckandupdatenode (core.js: 22525) à debugcheckdirectivesfn (core.js: 22485) at objet.eval [comme étant mis à jourIrecteur] (navComponent.html: 5) at objets.debugupdatedirects [comme étant mis à jourIrecteur] (core.js: 22477) à CheckandupDateView (core.js: 21873) à CallViewaction (core.js: 22114) p>
p>
<ul class="navbar-nav">
<li *appHasRole="['Admin', 'Moderator']" class="nav-item" routerLinkActive="active" >
<a class="nav-link" [routerLink]="['/admin']" id="side-menu">Admin</a>
</li>3 Réponses :
J'ai utilisé un concept similaire dans l'un de mes projets, afin de montrer ou masquer les éléments DOM en fonction des autorisations actuelles de l'utilisateur (= ~ rôle).
suggestion: il semble votre authservice.decodedToken < / CODE> La propriété est indéfinie à un moment donné - vous pouvez utiliser un combo sujet RXJS / observable dans votre authservice pour propager les rôles actuels des utilisateurs aux abonnés. Ensuite, abonnez-vous à cette propriété dans votre directive, pour afficher ou masquer l'élément. Ma mise en œuvre semble quelque peu comme celle-ci (le spectacle / masquage réel pourrait être différent, mais vous devriez toujours avoir mon point): Ispermitted méthode Renvoie une observabilité du résultat, car les autorisations pourraient encore être récupérées dans mon cas lorsque la directive demande le résultat (ce serait votre jeton d'authentification dans ce cas, cela pourrait ne pas être disponible à la naissance SPA).
Cette directive va bien. J'ai utilisé la même directive dans les 6, 7 et 8 angulaires sans problèmes.
<a *appHasRole="['Admin', 'Moderator']" class="nav-link" [routerLink]="['/admin']" id="side-menu">Admin</a>
Je ne sais pas si vous avez déjà résolu cela, mais je pense que vous essayez d'afficher le lien Admin avant d'être connecté. Si vous n'êtes pas connecté, vous n'aurez pas de jeton pour décoder et vous obtiendrez l'erreur indéfinie.
Essayez de mettre un * ngif = (logée) dans votre tag.
Dans votre étiquette UL *