J'ai besoin de réagir (en classe interceptacée) sur l'état HTTP 403 (pour obtenir / rafraîchir) JWT Jetken et réessayer la demande avec un jeton frais.
Dans le code ci-dessous, lorsque le serveur renvoie la réponse d'erreur Callback (pas dans le rappel d'erreur comme je m'attends) et l'événement est le type d'objet (qui est inutile en réaction sur la réponse des erreurs). L'objet événement ressemble à ceci: {Type: 0}. P>
Question: strong> p>
-Comment à gérer correctement HTTPERRORResponse (403 interdite) dans Httpinterceptor Lorsque j'ai besoin d'actualiser AccessTroken et réessayez la requête HTTP? P>
import {
HttpInterceptor,
HttpRequest,
HttpResponse,
HttpHandler,
HttpEvent
} from '@angular/common/http';
import 'rxjs/add/operator/map';
@Injectable()
class JWTInterceptor implements HttpInterceptor {
constructor(private tokenService: TokenService) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let myHeaders = req.headers;
if (this.tokenService.accessToken) {
myHeaders = myHeaders.append('Authorization',`${this.tokenService.accessToken.token_type} ${this.tokenService.accessToken.access_token}`)
}
const authReq = req.clone({headers: myHeaders});
return next.handle(authReq).map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// success callback
}
}, (err: any) => {
if (err instanceof HttpErrorResponse {
if (err.status === 403) {
// error callback
this.tokenService.obtainAccessToken()
}
}
})
.retry(1);
}
}
4 Réponses :
Vous devez ajouter l'opérateur Catch de RXJS. C'est ici qu'une erreur sera, et vous pouvez le gérer en conséquence.
Lorsque vous obtenez une erreur de statut 0, cela signifie probablement que le serveur distant est en panne et que la connexion n'a pas pu être faite.
Jetez un coup d'œil à mon exemple de logique: afin d'obtenir votre logique de rafraîchissement pour passer par l'intercepteur, vous devez renvoyer l'invocation et la fonction devrait également revenir. un Si vous souhaitez pouvoir réessayer la demande d'origine, ce que vous pouvez faire est de transmettre les données de la demande d'origine afin que, de manière rafraîchissante. Le jeton, vous pouvez faire l'appel à nouveau. Par exemple, c'est ce que votre fonction observable . Par exemple, modifier la logique d'origine ci-dessus: recershTroken pourrait ressembler à:
Cela résoudra une partie de mon problème - en capture, je peux maintenant accéder à HttperRorResponse et appeler ma logique de jeton actualisée / obtention de jeton - merci pour cela. Mais quand j'appelle .retry (1) La nouvelle requête HTTP ne passe plus à nouveau à l'intercepteur (afin que les en-têtes JWT ne soient pas ajoutés à un nouvel appel)
Ce que vous devez faire dans votre fonction de rafraîchissement est de renvoyer un observable . Puis renvoyez l'invocation de cette fonction de rafraîchissement dans ce bloc de capture, et elle ajoutera à l'intercepteur. Réponse mise à jour par exemple.
Ma solution finale à ce problème: fonction ajoute simplement l'en-tête d'autorisation à la copie de la demande d'origine fonction Obtenez un serveur d'autorisation de formulaire de jeton frais et le stocke
Je voulais juste partager ce qui a fonctionné pour moi:
Parfait. Merci. L'en-tête d'autorisation doit inclure le préfixe au porteur.
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// add authorization header with jwt token if available
const currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
console.log('Interceter called');
console.log(currentUser);
// const re = 'https://newsapi.org';
const re = '/user';
if (request.url.search(re) === -1) {
if (currentUser && currentUser.token) {
console.log('Token is being added....!!!!!');
// console.log(currentUser.token);
request = request.clone({
setHeaders: {
Authorisation: `Token ${currentUser.token}`,
}
});
}
console.log('Request Sent :');
console.log(request);
}
return next.handle(request);
}
}