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

Posted 2023-03-10

【中文标题】在 http 请求之前执行的 Angular 拦截器

【英文标题】：Angular interceptor executed before http request

【发布时间】：2021-12-11 15:32:30

【问题描述】：

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

【问题讨论】：

你必须return 一些有意义的东西才能让它工作angular.io/guide/http#intercepting-requests-and-responses

【参考方案1】：

您可以将它与管道和水龙头（或任何其他 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.
            )
          );