Discussion :

[keokaz]

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

[krakatoa]

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 !

[keokaz]

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>