Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre confirmé
    Changer l'état d'une variable après un navigateByUrl
    Bonjour,

    je souhaite changer l'état d'une variable après s'être authentifié, voici mon code component.html qui est ma page d'accueil (elle est vide)

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
          <div id="brik_central">
            <h1  *ngIf="isAdmin" style="background:red">ADMIN</h1>
            <router-outlet></router-outlet>
          </div>


    dans un autre composant j'ai mis un formulaire d'authentification:

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <form #f="ngForm" (ngSubmit)="onLogin(f.value)">
          <div class="erreur" *ngIf="mode==1">
              <strong>erreur de formulaire</strong>
          </div>
          <mat-form-field>
            <input ngModel="" matInput placeholder="login" name="username" required>
          </mat-form-field>
     
          <mat-form-field>
            <input ngModel="" matInput placeholder="password" name="password" required>
          </mat-form-field>
          <br/>
          <button mat-raised-button type="submit" color="accent"  >Login</button>
          <br/>
          <button mat-raised-button type="submit" color="primary"  >Register</button>
    </form>


    voici la méthode onLogin:
    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
      onLogin(user){//    console.log("on login==="+JSON.stringify(user)); //verifier les champs remplis
        this.authService.login(user).subscribe(resp=>{
            let jwt=resp.headers.get('Authorization'); 
            this.authService.saveToken(jwt);
            this.router.navigateByUrl('/');
     
          },err=>{
            this.mode =1;
          })
     
      }


    Cette méthode récupère le jeton jwt, et change le router-outlet:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
     
          this.router.navigateByUrl('/');


    pour le moment mon but est simple, si j'ai un jwt en local storage je souhaite que isAdmin est à true.
    Mais pour le moment isAdmin est toujours à false:

    voici mon component.ts
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     
     
    export class AppComponent implements OnInit{
     
      ngOnInit() {
     
        localStorage.getItem("jwt") ? console.log("jwt ok") :console.log(new Date());
        this.isAdmin = false;
      }
     
      title = 'tdolist';
      events: string[] = [];
      opened: boolean;
      isAdmin:boolean = false;
     
      constructor(private authService:AuthenticationService,private router:Router){
      }
     
      deconnexion(){
        this.authService.logOut();
        this.router.navigateByUrl("/login");
     
      }
    }

    Que faut t'il faire pour que isAdmin soit à true ?
    je dois utiliser le @input et @output pour y arriver ?
    merci d'avance de vos réponses

  2. #2
    Membre actif
    quand tu changes l'état de isAdmin

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
     
            this.authService.saveToken(jwt);



    à aucun moment, AppComponent est informé du changement de valeur.

    c'est donc une communication enfant(login) vers parent (Appcomponent)
    pour cela il faut utiliser un eventemitter, tu trouveras de la doc sur internet, c'est facile !

  3. #3
    Membre confirmé
    Merci de ta réponse,
    je n'avais pas pensé mais je dois juste utiliser une fonction plutôt que de lire la variable isAdmin

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    <h1 *ngIf="getServiceIsAdmin()" style="background:red">ADMIN</h1>