Gestion de requête avec Angular

Version imprimable

23/11/2020, 11h21
Badshade23

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 ;)

bonjour,

on m'appelle ????? oui je suis là :ptdr::ptdr::ptdr:
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:

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:

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:

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

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:

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....

23/11/2020, 21h34
dukoid
ne jamais utiliser de timer, interval, delay ..... :aie::aie::aie:
et c'est très loin de la solution que j'ai proposé :D 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:

1 2 3 const isApiUrl = request.url.startsWith(environment.apiUrl); // environment.apiUrl = 'https://monsiteapi.com/api' if (isApiUrl) {
26/11/2020, 13h34
Badshade23

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 ;)