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é

    Profil pro
    Inscrit en
    août 2008
    Messages
    1 086
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2008
    Messages : 1 086
    Points : 516
    Points
    516
    Par défaut 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 du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 30
    Points : 46
    Points
    46
    Par défaut
    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é

    Profil pro
    Inscrit en
    août 2008
    Messages
    1 086
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2008
    Messages : 1 086
    Points : 516
    Points
    516
    Par défaut
    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>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. changer le nom d'une variable
    Par chet dans le forum Général Python
    Réponses: 1
    Dernier message: 11/08/2006, 11h12
  2. [Sécurité] Effacer une variable après insertion ?
    Par psychoBob dans le forum Langage
    Réponses: 7
    Dernier message: 23/04/2006, 23h34
  3. Réponses: 2
    Dernier message: 23/10/2005, 18h05
  4. Changer el type d'une variable sql sous postgre8/admin
    Par smag dans le forum PostgreSQL
    Réponses: 2
    Dernier message: 24/08/2005, 12h31
  5. [ JSP ][ JavaScript ] Changer la valuer d'une variable
    Par romain3395 dans le forum Servlets/JSP
    Réponses: 6
    Dernier message: 08/06/2004, 15h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo