IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

Angular Discussion :

Gestion de requête avec Angular


Sujet :

Angular

  1. #1
    Membre habitué Avatar de Badshade23
    Homme Profil pro
    Développeur Java
    Inscrit en
    Décembre 2014
    Messages
    203
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Décembre 2014
    Messages : 203
    Points : 133
    Points
    133
    Par défaut Gestion de requête avec Angular
    Salut tout le monde

    J'aurai besoin d'un expert en Angular ^^

    Je suis en train de mettre en place sur un site un système de token / refresh token (enfin j'essaye xD). Mais mon problème est le suivant :

    Admettons que notre user est connecté, il a son token tout se passe bien ...
    Puis à un moment il veut changer de page (par exemple) et là dans le nginit une multitude de requêtes s'exécutent (comme les requêtes sont asyn ....).
    Puis la première me retourne que mon token est expiré, je demande donc à mon Back de me régénérer un nouveau token en lui envoyant mon refresh token à la place du token basique. Mais le problème c'est qu'en attendant mes autres requêtes vont revenir aussi en me disant que le token est expiré mais j'ai déjà traité ce problème et du coup celles-ci vont finir sans réponses ....

    Comment faire pour régler ce problème ?

    Merci d'avance pour vos idées, commentaires

  2. #2
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    bonjour,

    on m'appelle ????? oui je suis là
    bon, je ne suis pas expert mais je me débrouille je pense.

    (1) méthode 1 disons un peu simpliste

    il faut utiliser un handleError (tu trouveras sur google)
    et la technique des async await

    je schématise:

    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
     
    ngOnInit() {
       requestapi();
    }
     
    async requestapi() {
      await requete1   {
     
       handleError(error);
      }
     
      await requete2   {
     
       handleError(error);
      }
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    async handleError(error) {
     
        si (code error === code token expired) {    401 je crois !
            new token = await demande un nouveau token
            sauvegarde new token
            requestapi();     
        }
    }



    (2) méthode 2: la bonne pratique


    dans le composant, tu fais les requêtes async ... await
    interceptor, intercepte la demande d'envoi et l'encapsule dans le code ci dessous :


    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
     
    import { Injectable } from '@angular/core';
    import {
      HttpRequest,
      HttpHandler,
      HttpEvent,
      HttpInterceptor,
    } from '@angular/common/http';
    import { Observable, throwError } from 'rxjs';
    import { catchError } from 'rxjs/operators';
    import { AuthService } from '../services/auth.service';
    import { environment } from 'src/environments/environment';
    import { Router } from '@angular/router';
     
    @Injectable()
    export class UnauthorizedInterceptor implements HttpInterceptor {
      constructor(private authService: AuthService, private router: Router) {}
     
      intercept(
        request: HttpRequest<unknown>,
        next: HttpHandler
      ): Observable<HttpEvent<unknown>> {
        return next.handle(request).pipe(
          catchError((err) => {
            if (err.status === 401) {       
            const isApiUrl = request.url.startsWith(environment.apiUrl);
            if (isApiUrl) {      // concerne que les requêtes API
             accessToken = await   nouvelle demande de token
             sauvegarde(accessToken );
     
                request = request.clone({  setHeaders: { Authorization: `Bearer ${accessToken}` },   });                // on clone la requête pour la re envoyer avec le bon token !
                return next.handle(request);
             }
     
     
            }
     
            if (!environment.production) {
              console.error(err);
            }
            const error = (err && err.error && err.error.message) || err.statusText;
            return throwError(error);
          })
        );
      }
    }


    si ça fonctionne ou pas : (1) ou (2) , tiens moi au courant

  3. #3
    Membre habitué Avatar de Badshade23
    Homme Profil pro
    Développeur Java
    Inscrit en
    Décembre 2014
    Messages
    203
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Décembre 2014
    Messages : 203
    Points : 133
    Points
    133
    Par défaut
    Salut dukoid tout d'abord merci pour ta réponse ^^
    Alors je n'ai pas fait exactement comme toi mais je pense que le principe reste le même.
    Voici mon code :
    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    intercept(req: HttpRequest<any>,
                next: HttpHandler): Observable<HttpEvent<any>> {
     
        if (this.authenticationService.accessTokenExpired && !this.authenticationService.tokenRequest) {
          this.authenticationService.tokenRequest = true;
          this.authenticationService.loginRefresh().subscribe((date) => {
            console.log('passe pour new value expired : ' + this.authenticationService.tokenRequest);
            this.authenticationService.tokenRequest = false;
          });
        }
     
        if (req.url !== AuthenticationService.URL_REFRESH_SIGN_IN) {
          while (this.authenticationService.tokenRequest) {
            console.log(' avant le delay ');
            this.delay(1000);
          }
        }
     
     
        /* if (this.authenticationService.tokenRequest && req.url !== AuthenticationService.URL_REFRESH_SIGN_IN){
           console.log("passe avant test");
           this.test().then(r => console.log('retour avec le nouveau token !!'));
           console.log('passe apres test');
         }*/
     
        if (!this.authenticationService.tokenRequest && this.authenticationService.jwt) {
          // Si le token est encore valide
          console.log('envoie le JWT : ' + this.authenticationService.jwt);
          console.log('pour la requete : ' + req.url);
          const cloned = req.clone({
            headers: req.headers.set('Authorization', `Bearer ${this.authenticationService.jwt}`)
          });
          return next.handle(cloned);
        } else if (this.authenticationService.jwtRefresh) {
          console.log('tocken expired : ' + this.authenticationService.jwt);
          console.log('envoie le JWTRefresh : ' + this.authenticationService.jwtRefresh);
          console.log('pour la requete : ' + req.url);
          //    this.authenticationService.jwtExpired = true;
          // si le token n'est plus valide
          const cloned = req.clone({
            headers: req.headers.set('Authorization', `BearerRefresh ${this.authenticationService.jwtRefresh}`)
          });
          return next.handle(cloned);
        } else {
          console.log('envoie le sans jwt ');
          // Si aucun utilisateur n'est conncté.
          return next.handle(req);
        }
        // }
      }
    Sorry pour tous les commentaires mais je testes plein de truc.
    Mon gros problème c'est que je n'arrive pas à faire de delay dans un intercepteur ....
    Si je ne dit pas de bêtises nous avons que un seul intercepteur pour toutes les requêtes ? Dons si je le bloque, je n'aurai même pas le retour de mon refresh token si ?
    J'ai un peut de mal je dois l'avouer....

  4. #4
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    ne jamais utiliser de timer, interval, delay .....
    et c'est très loin de la solution que j'ai proposé je trouve !
    je t'ai montré une solution avec la méthode (2) , pourquoi es tu partie dans ce genre de choses ?

    je ne connais pas ton niveau mais si tu es débutant, tu ferai bien d'utiliser la méthode 1

    il faut que tu étudies la notion: async / await et donc à quoi ça sert



    en effet, l'interceptor recupère toutes les requetes... c'est pour cela qu'il faut tester :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
           const isApiUrl = request.url.startsWith(environment.apiUrl);      // environment.apiUrl =  'https://monsiteapi.com/api'
            if (isApiUrl) {

  5. #5
    Membre habitué Avatar de Badshade23
    Homme Profil pro
    Développeur Java
    Inscrit en
    Décembre 2014
    Messages
    203
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Décembre 2014
    Messages : 203
    Points : 133
    Points
    133
    Par défaut
    Merci pour ta réponse,
    J'ai repris ce que tu as dit et me suis aussi inspiré de différents sites que voici (si ça peut aider quelqu'un ) :

    https://medium.com/@ryanchenkie_4093...rs-2f9d1540eb8
    https://angular-academy.com/angular-jwt/

    Merci encore en tout cas

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

Discussions similaires

  1. [PDO] gestion des pages avec requêtes MySql
    Par philo71 dans le forum PHP & Base de données
    Réponses: 17
    Dernier message: 19/11/2017, 20h12
  2. Gestion de l'état d'une requête avec ajax
    Par ben22222222 dans le forum AJAX
    Réponses: 1
    Dernier message: 22/12/2016, 23h50
  3. Réponses: 5
    Dernier message: 19/02/2015, 19h23
  4. Réponses: 3
    Dernier message: 30/06/2009, 20h16
  5. Création requête avec gestion de date
    Par MELINE dans le forum Access
    Réponses: 1
    Dernier message: 30/09/2005, 12h12

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