How use async service into angular httpClient interceptor
I think that there is a issue about the reactive flow. The method intercept expects to return an Observable and you have to flatten your async result with the Observable returned by next.handle
Try this
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return this.asyncService.applyLogic(req).mergeMap((modifiedReq)=> {
const newReq = req.clone(modifiedReq);
return next.handle(newReq);
});
}
You could also use switchMap instead of mergeMap
Asynchronous operation in HttpInterceptor with Angular 6.0 and RxJS 6.0
auth.interceptor.ts
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/index';;
import { switchMap } from 'rxjs/internal/operators';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private auth: AuthService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return this.auth.client().pipe(switchMap(() => {
return next.handle(request);
}));
}
}
auth.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable()
export class AuthService {
constructor() {}
client(): Observable<string> {
return new Observable((observer) => {
setTimeout(() => {
observer.next('result');
}, 5000);
});
}
}
If you need to invoke an async function within interceptor then the following approach can be followed using the rxjs
from
operator.
import { MyAuth} from './myauth'
import { from, lastValueFrom } from "rxjs";
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private auth: MyAuth) {}
intercept(req: HttpRequest<any>, next: HttpHandler) {
// convert promise to observable using 'from' operator
return from(this.handle(req, next))
}
async handle(req: HttpRequest<any>, next: HttpHandler) {
// if your getAuthToken() function declared as "async getAuthToken() {}"
await this.auth.getAuthToken()
// if your getAuthToken() function declared to return an observable then you can use
// await this.auth.getAuthToken().toPromise()
const authReq = req.clone({
setHeaders: {
Authorization: authToken
}
})
return await lastValueFrom(next.handle(req));
}
}