Angular2 routage et interception d'appels (changements dans l'API HTTP quelque part de la version 2.1.0 à la version 2.2.3.)

Question

(Cette question est le résultat des changements dans l'API HTTP quelque part entre les versions 2.1.0 et 2.2 . .3 Il peut être préférable de simplement regarder la réponse, que les effets des changements sont expliqués il)

Voici la séquence que j'ai.

J'intercepter un appel, ... , actualisez un jeton si nécessaire et effectuez un second appel HTTP:

intercept(observable: Observable<Response>): Observable<Response> { 
    return observable.catch((err: any, caught: Observable<Response>) => { 
     ... 
       return this.refreshtoken().flatMap((res) => 
       this.returnLastMethod(returnMethod, returnUrl, returnData)); 

En refreshToken():

localStorage.setItem('accessToken', x); 

Dans l'une des méthodes à l'intérieur du returnLastMethod je fais un

let accessToken = localStorage.getItem('accessToken') 

et par conséquent je reçois toujours le jeton d'accès d'un appel Http avant. Maintenant, c'est un code qui a fonctionné avant de basculer vers Angular ver: 2.2.3, et qui le fait toujours, mais évidemment, il me manque quelque chose ici car il ne fonctionne pas dans Angular-2.2.3.

Voici la sortie Chrome:

C'est quand j'utilise la variable privée pour créer de nouveaux en-têtes. Pour une raison quelconque, l'appel Http utilise une autre valeur, comme s'il ne faisait que répéter l'ancien appel Http (dans le journal de la console, la nouvelle valeur est celle que je donne à la méthode).

Le code de la fonction où je donne la nouvelle valeur au deuxième appel Http:

private returnLastMethod(typ: number, url: string, data?: any): Observable<Response> { 
    let lastMethodOptions = new RequestOptions(); 
    lastMethodOptions.headers = new Headers(); 
    let accessToken1 = this.currentAccessToken; 
    console.log(accessToken1 + ' - set to Bearer'); 
    lastMethodOptions.headers.append('Authorization', 'Bearer ' + accessToken1); 
    lastMethodOptions.headers.append('Content-Type', 'application/json'); 
    switch (typ) { 
     case 1: 
      console.log('url: ' + url + ' options: '); 
      for (let i = 0; i < lastMethodOptions.headers.values().length; i++) { console.log(lastMethodOptions.headers.values()[i]); }; 
      return super.request(url, lastMethodOptions); 
     case 3: 
      console.log('url: ' + url + ' options: '); 
      for (let i = 0; i < lastMethodOptions.headers.values().length; i++) { console.log(lastMethodOptions.headers.values()[i]); }; 
      return super.put(url, data, lastMethodOptions); 
     case 4: 
      console.log('url: ' + url + ' options: '); 
      for (let i = 0; i < lastMethodOptions.headers.values().length; i++) { console.log(lastMethodOptions.headers.values()[i]); }; 
      return super.post(url, data, lastMethodOptions); 
     case 5: 
      console.log('url: ' + url + ' options: '); 
      for (let i = 0; i < lastMethodOptions.headers.values().length; i++) { console.log(lastMethodOptions.headers.values()[i]); }; 
      return super.delete(url, lastMethodOptions); 
     default: 
      console.log('url: ' + url + ' options: '); 
      for (let i = 0; i < lastMethodOptions.headers.values().length; i++) { console.log(lastMethodOptions.headers.values()[i]); }; 
      return super.get(url, lastMethodOptions); 
    }; 

} 

Je ne comprends pas ce que je fais mal. Le nouvel appel Http devrait utiliser la nouvelle valeur qui est affichée dans le journal de la console, mais il semble que ce n'est pas le cas?

Answer 1

Le problème était le suivant. Avant de passer à angulaire 2.2.3, je fonctionne comme les suivantes:

request(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    ... 
    return this.intercept(super.request(url, this.getRequestOptionsArgs(options))); 
} 

Cela a fonctionné, mais après le passage à angulaire 2.2.3, URL est non seulement une chaîne plus, il est un objet, et cela tient également à l'intérieur.

Lorsque je souhaitais effectuer une nouvelle demande pour retourner la dernière page visitée (avec les nouveaux en-têtes et le nouveau jeton), cela n'a pas été utilisé pour effectuer l'appel. Au lieu de cela, parce que j'utilisais l'url qui avait le jeton à l'intérieur, ce jeton était utilisé.

Après l'utilisation de url['url'], tous les problèmes ont disparu.

Mise à jour

J'ai fait quelques refactoring, et dans le processus ont découvert les suivantes:

En fonction de la demande est url un objet, dans les méthodes autres est url la chaîne.

Donc, si vous regardez vers le bas:

request(url: string|Request, options?: RequestOptionsArgs) : Observable<Response> 

Il dit que url peut prendre aussi la demande tout à l'intérieur, et c'est ce qu'il fait. Dans mon code, j'avais quelque chose comme:

delete(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    this.lastMethod = 5; 
    this.lastUrl = url; 
    return this.intercept(super.delete(url, this.getRequestOptionsArgs(options))); 
} 

La similaire pour obtenir, après, mettre ...

D'une certaine façon, après les (get, put, après ...) est la commande de demande appelé, et cette commande a maintenant toute la demande en elle-même, et cela a créé des problèmes dans mon code, car ma fonction attendait une chaîne à cet endroit. Comme je le répète, cela fonctionnait différemment avant, probablement sans la méthode d'appel à la demande, car ce problème était inexistant avant ...