Comment afficher/masquer l'élément en fonction du rôle de l'utilisateur Angular 4

Mohamed Wahshey

Je travaille sur un projet qui a plus d'un type d'utilisateur (SuperUser - SchoolAdmin - Teacher)

Et chaque rôle a le privilège de voir certains éléments.

Comment masquer des éléments en fonction du rôle de l'utilisateur connecté à l'aide de *ngIf ?

Ceci est le lien du projet sur Stack-blitz, j'en ai téléchargé une partie pour me guider avec l'aperçu en direct.

À l'intérieur de l'application, vous trouverez des services communs >> auth, c'est le dossier qui a le service de connexion et la protection d'authentification.

À l'intérieur de models >> enum, vous trouverez le type d'utilisateur enum.

À l'intérieur de la connexion aux composants, vous trouverez le formulaire qui définit le type d'utilisateur.

À l'intérieur des routes, vous verrez les rôles attendus pour chaque composant.

Utilisateurs que j'ai créés pour les tests :

Cela devrait vous diriger vers la liste des écoles

Admin (qui a le rôle de super utilisateur) : [email protected] Mot de passe : 12345

Cela devrait vous diriger vers le tableau de bord

Étudiant (qui a le rôle d'étudiant) : [email protected] Mot de passe : 12345

Par exemple, est-ce que je veux masquer l'élément sur le tableau de bord pour qu'il ne soit affiché qu'au rôle de super utilisateur, comment puis-je le faire ?

Je sais qu'il existe un moyen avec ngIf mais je suis coincé sur la bonne façon de l'écrire dans le NgIf, je veux des exemples sur mon code pas un code factice.

Mise à jour : le problème a été résolu, j'ai donc supprimé les utilisateurs créés pour les tests.

carton

Dans votre projet, lorsqu'un utilisateur s'inscrit, vous demandez s'il est 'Enseignant', 'Parent' ou 'Etudiant'. Alors voilà, vous avez votre état.

Lorsque vous vous connectez ou vous inscrivez, vous devez enregistrer vos données d'utilisateur quelque part (dans un service par exemple que vous pouvez utiliser avec @injection .

Ensuite, avec ces données, vous devriez faire des tests dans votre DOM comme ceci :

/* if type_id == id(student) */
 <div *ngIf="myService.currentUser.type_id">
   // your student display ...
 </div>

 /* if type_id == id(teacher) */
 <div *ngIf="myService.currentUser.type_id">
   // your teacher display ...
 </div>

Est-ce que cela vous aide ? Vous devriez lire cette documentation Services

[Exemple dans votre cas]

Ton service: 

import { Injectable } from '@angular/core';
/*
   other import 
*/

 @Injectable()
 export class UserService {

      public currentUser: any;

      constructor(){}

      public login(loginData: LoginModel): any {
            const apiUrl: string = environment.apiBaseUrl + '/api/en/users/login';  
            let promise = new Promise((resolve, reject) => { // this is a  promise. learn what is a promise in Javascript. this one  is only more structured in TypeScript
  // a promise is returned to make sure that action is taken only after the response to the api is recieved
             this.http.post(apiUrl, loginData).subscribe((data: any) => {
                if(data.status)
                {
                  var userData = {
                      token: data.token,
                      user:data.user 
                     };
                this.currentUser = data.user // HERE SAVE YOUR user data
                return resolve(userData);
                }
                else {
                       return reject(data)
                 }
               }, (err: HttpErrorResponse) => {
               return reject(err);
            });
          });
     return promise;
      }
 }

Ensuite, injectez ce service dans votre constructeur et votre service dans

Composant:

// Don't forgot to import UserService !!
constructor(public userService: UserService){}

JUGEMENT:

*ngIf="userService.currentUser.type_id == 1"

Articles connexes