如何用HttpInterceptor拦截angular4中的响应

Question

我有以下拦截器：

@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()
  }
}

而且我想将响应头中的令牌保存在本地存储中，所有教程都在展示如何拦截请求，但响应不是很清楚。

Answer 1

next.handle(req) returns 一个可观察对象，因此您可以订阅它：

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;
})

要了解有关拦截器背后机制的更多信息，请阅读：

Insider’s guide into interceptors and HttpClient mechanics in Angular

Answer 2

你还需要导入库

    import 'rxjs/add/operator/map';

然后你使用如下。您还需要 return 事件对象，以便它可以在您的 subscribe() 函数中接收。

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

Answer 3

你可以试试这个：

第 1 步：导入：

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

import { Observable } from "rxjs";

import { tap } from "rxjs/operators";

第 2 步：如果您使用的是 compact 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);
                }
            ))    
    }
}

如何用HttpInterceptor拦截angular4中的响应

How to intercept the response in angular 4 with HttpInterceptor

angular-http-interceptors

angular