Puis-je utiliser promesse dans HttpInterceptor
? Par exemple:
export class AuthInterceptor implements HttpInterceptor{
this.someService.someFunction()
.then((data)=>{
//do something with data and then
return next.handle(req);
});
}
pourquoi j'ai besoin de ça? car j'ai besoin d'obtenir un jeton à ajouter à l'en-tête de la demande avant de faire la demande au serveur.
Mon intercepteur:
@Injectable()
export class AuthInterceptor implements HttpInterceptor{
constructor(private authService: AuthService){}
intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
console.log('Intercepted!');
// return next.handle(req);
this.authService.getToken()
.then((token)=>{
console.log(token);
const reqClone = req.clone({
headers: req.headers
.set('Authorization', 'Bearer ' + token)
.append('Content-Type', 'application/json')
});
console.log(reqClone);
return next.handle(reqClone);
})
.catch((err)=>{
console.log('error in interceptor' + err);
return null;
});
}
}
Demande:
this.http.post(this.baseURL + 'hero', data)
.subscribe(
(res: any) => {
console.log('Saved Successfully.');
console.log(res);
},
(err: any) => {
console.log('Save Error.' + err);
}
);
Problèmes auxquels je suis confronté:
-> Je reçois cette erreur avant que la promesse ne soit résolue.
You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
Promise resloves et j'obtiens mon jeton mais après l'erreur.
MISE À JOUR: en utilisant [email protected]
import { from, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService){}
intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
return from(this.authService.getToken())
.pipe(
switchMap(token => {
const headers = request.headers
.set('Authorization', 'Bearer ' + token)
.append('Content-Type', 'application/json');
const requestClone = request.clone({
headers
});
return next.handle(requestClone);
})
);
}
}
RÉPONSE ORIGINALE
Oui, vous pouvez injecter le service requis dans la méthode constructeur de l'intercepteur, et dans l'implémentation de intercept
récupérer la valeur, créer une nouvelle requête http mise à jour et la gérer.
Je ne suis pas bon avec les promesses, vous pouvez donc essayer ce qui suit:
import { fromPromise } from 'rxjs/observable/fromPromise';
@Injectable()
export class AuthInterceptor implements HttpInterceptor{
constructor(private authService: AuthService){}
intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
return fromPromise(this.authService.getToken())
.switchMap(token => {
const headers = req.headers
.set('Authorization', 'Bearer ' + token)
.append('Content-Type', 'application/json');
const reqClone = req.clone({
headers
});
return next.handle(reqClone);
});
}
}
pour RxJS 6+, j'ai mis à jour la réponse de Jota.Toledo:
import { fromPromise } from 'rxjs/observable/fromPromise';
@Injectable()
export class AuthInterceptor implements HttpInterceptor{
constructor(private authService: AuthService){}
intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
return fromPromise(this.authService.getToken())
.pipe(switchMap(token => {
const headers = req.headers
.set('Authorization', 'Bearer ' + token)
.append('Content-Type', 'application/json');
const reqClone = req.clone({
headers
});
return next.handle(reqClone);
}));
}
}
Mon tour (Merci à Jota.Toledo et Capripio):
1) Passez de "fromPromise" à "from" -> fromPromise n'existe pas sur le type Observable
2) Correction du devis "application/json"
import { Observable, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService){}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return from(this.authService.getToken()).pipe(
switchMap(token => {
const headers = req.headers
.set('Authorization', 'Bearer ' + token)
.append('Content-Type', 'application/json');
const reqClone = req.clone({
headers
});
return next.handle(reqClone);
}));
}
}
Ma version de RxJs: "6.2.2" J'espère que cela a aidé!