Angular HTTP 攔截器自定義預檢

Question

我正在編寫一個與后端 API 通信的應用程序，該后端需要在每個請求上設置XSRF-TOKEN header。 我已經通過以下 HTTP 攔截器實現了這一點：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  const modifiedReq = request.clone({
    headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
  });

  return next.handle(modifiedReq);
}

現在我需要處理尚未設置XSRF-TOKEN cookie 的情況。 在這種情況下，我需要預檢我發送的請求，該請求會命中后端 API 上的特定/csrf端點，這將返回Set-Cookie header 以設置XSRF-TOKEN 。

作為一個快速而骯臟的測試（沒有重構以刪除重復的代碼），我嘗試了這個：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  if (!this.cookieService.check('XSRF-TOKEN')) {
    this.apiService.csrf().subscribe(() => {
      const modifiedReq = request.clone({
        headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
      });

      return next.handle(modifiedReq);
    });
  }

  const modifiedReq = request.clone({
    headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
  });

  return next.handle(modifiedReq);
}

但這顯然會導致對/csrf端點的請求無限循環，因為攔截器內的每個 HTTP 請求都會被自己攔截......

我怎樣才能實現我在這里的目標？

Answer 1

只需讓對/csrf的請求完成而不攔截它：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

  if (request.url === '/csrf') {
    return next.handle(request);
  }

  if (!this.cookieService.check('XSRF-TOKEN')) {
    this.apiService.csrf().subscribe(() => {
      const modifiedReq = request.clone({
        headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
      });

      return next.handle(modifiedReq);
    });
  }

  const modifiedReq = request.clone({
    headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
  });

  return next.handle(modifiedReq);
}