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

Question

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

 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 之前执行（因此没有登录、没有令牌、没有用户数据等）。因此它没用，因为我需要令牌才能设置 headers，如代码所示。

Answer 1

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

logging-request-and-response-pairs

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

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

Angular interceptor executed before http request

http

jwt

mean-stack

angular-http-interceptors

angular