在 http 请求之前执行的 Angular 拦截器

Question

我正在使用 MEAN 应用程序，但在使用令牌拦截器时遇到了问题。 它应该在用户使用以下代码登录后应用标题：

 intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const token = localStorage.getItem('token');
    let req = request;
    if (token) {
      req = request.clone({
        setHeaders: {
          authorization: `Bearer ${token}`
        }
      });
    }
 }

但是，我调试了代码，它在登录调用 api 之前执行（因此没有登录、没有令牌、没有用户数据等）。 因此它没用，因为我需要令牌来设置标题，如代码所示。

Answer 1

您可以将它与管道和水龙头（或任何其他 RxJs 运算符）结合使用，以在响应调用到达您的服务之前对其进行操作。

记录请求和响应对

intercept(req: HttpRequest<any>, next: HttpHandler) {
       // change req here before being send
           
        return next.handle(req)
          .pipe(
            tap(
              // to access data, or use map to manipulate it.
            )
          );