Как перехватить ответ в угловом 4 с помощью HttpInterceptor

У меня есть следующий Interceptor:

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(private tokenService: TokenService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.tokenService.getToken();

    if (token) {
      const authReq = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ${token}')
      });

      return next.handle(authReq);
    }

    return next
      .handle(req)
//
      .getSomehowTheResponse()
      .andSaveTheTokenInStorage()
      .andPropagateNextTheResponse()
  }
}

И я хочу сохранить токен из заголовка ответа в локальном хранилище, все учебники показывают, как перехватить запрос, но не очень четко ответ.

+10
источник поделиться
3 ответа

next.handle(req) возвращает наблюдаемое, чтобы вы могли подписаться на него:

return next.handle(req).map((event: HttpEvent<any>) => {
  if (event instanceof HttpResponse) {
    // do stuff with response and headers you want
    event.headers
    event.body
  }
  return event;
})

Чтобы узнать больше о механике позади перехватчиков, прочитайте:

+13
источник

вам также нужно импортировать библиотеку

    import 'rxjs/add/operator/map';

то вы используете, как показано ниже. вам также необходимо вернуть объект события, чтобы он мог быть получен в вашей функции subscribe().

    return next.handle(req).map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // do stuff with response and headers you want
      }
      return event; 
    });
+4
источник

Вы можете попробовать это 1. Imoprt это:

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from 
"@angular/common/http";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";

2. Если вы используете компактный rxjs, вы можете заменить "tap" на "do"

export class RoleInterceptor implements HttpInterceptor{
intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>>{
return next.handle(req).pipe(tap(
event=>{
console.log('Intercepted! response',event);
}
))    
}
}
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос