主页 / coding / 问题 / 79342110
Accepted
D052057
Asked: 2025-01-09 17:41:29 +0800 CST

HTTP_INTERCEPTORS 与从 Youtube 获取数据相冲突

  • 772

我的应用程序/项目的环境和功能：Angular 19 和 .Net Backend，从 Youtube 获取视频数据并使用 http_interceptors 登录和注册功能。

我的问题或麻烦：如果我在 main.ts 中使用 http_interceptors，我的 Youtube 查询 API 将无法正常工作。这是我的测试方法：我注释了 http_interceptors，然后我的查询 API 就可以正常工作了。

我的main.ts中的http_interceptor：

{
  provide: HTTP_INTERCEPTORS,
  useClass: JwtInterceptor,
  multi: true
},

我从 Youtube 获取 HTTP 和订阅时出错：

{
    "headers": {
        "normalizedNames": {
        },
        "lazyUpdate": null
    },
    "status": 401,
    "statusText": "OK",
    "url": "https://www.googleapis.com/youtube/v3/playlistItems?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&part=snippet&maxResults=12&playlistId=PLPvjlyTckx7OhGYE9JZw9Q1MYP_n-u-8V",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for https://www.googleapis.com/youtube/v3/playlistItems?key=xxxxxxxxxxxxxxxxxxxxxxxx&part=snippet&maxResults=12&playlistId=PLPvjlyTckx7OhGYE9JZw9Q1MYP_n-u-8V: 401 OK",
    "error": {
        "error": {
            "code": 401,
            "message": "Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
            "errors": [
                {
                    "message": "Invalid Credentials",
                    "domain": "global",
                    "reason": "authError",
                    "location": "Authorization",
                    "locationType": "header"
                }
            ],
            "status": "UNAUTHENTICATED"
        }
    }
}

我的组件中的 JwtInterceptor 代码：

export class JwtInterceptor implements HttpInterceptor {
  private accountService = inject(AccountService);


  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.accountService.user$.pipe(take(1)).subscribe({
      next: user => {
        if (user) {
          // Clone from the coming request and add Authorization header to that
          request = request.clone({
            setHeaders: {
              Authorization: `Bearer ${user.jwt}`
            }
          });
        }
      }
    })
    return next.handle(request);
  }
}

我的问题是：当我尝试访问或从 Youtube 获取数据时，如何禁用拦截器？

谢谢。

angular

3 个回答

  1. 您可以利用HttpBackend，它在正常 API 调用期间在拦截器逻辑之后调用。因此，使用它进行的 API 调用不会被拦截器拦截。

        @Component({
        selector: 'my-app',
        template: `
            <div><h3>Response</h3>{{response | async | json}}</div>
            <button (click)="request()">Make request</button>`
        ,
    })
    export class AppComponent {
        response: Observable<any>;
        constructor(private backend: HttpXhrBackend) {}

        request() {
            const req = new HttpRequest('GET', 'https://jsonplaceholder.typicode.com/posts/1');
            this.response = this.backend.handle(req);
        }
    }

    参考 Stackblitz

    • 3
  2. Best Answer

    如果请求不是发往需要您的 JWT 的域，您可以修改拦截器以提前返回。

    在这里我使用了一个简单的正则表达式来检查单个域，但是任何测试只要确认您是否知道目标 URL 需要 JWT 就可以了：

    export class JwtInterceptor implements HttpInterceptor {
  private accountService = inject(AccountService);
  private readonly myDomainPattern = /^http(s)?:[\/\\]{2}example.com[\/\\].*/i;

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

    // If this request isn't going to our API, we don't need
    // to append our JWT. Third party services won't need it.
    if (!myDomainPattern.test(req.url)) {
      return next.handle(request);
    }

    // Otherwise, continue adding our JWT as usual.
    this.accountService.user$.pipe(take(1)).subscribe({
      next: user => {
        if (user) {
          // Clone from the coming request and add Authorization header to that
          request = request.clone({
            setHeaders: {
              Authorization: `Bearer ${user.jwt}`
            }
          });
        }
      }
    })
    return next.handle(request);
  }
}

    附注：您可能会遇到拦截器的计时问题，因为您是在订阅后返回，而不是在user$可观察对象发出后返回。

    您可以返回一个组合的可观察对象，它将延迟执行next.handle()直到user$发出为止：

    // Otherwise, continue adding our JWT as usual.
return this.accountService.user$.pipe(
  take(1),
  switchMap(user => {
    if (user) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${user.jwt}`,
        }
      });
    }
    return next.handle(request);
  }));
    • 0

  3. 谢谢你的回答。这是我根据你输入的代码。

    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  if (this.myDomainPattern.test(request.url)) {

    this.accountService.user$
      .pipe(take(1))
      .subscribe({
        next: user => {
          if (user) {
            // Clone from the coming request and add Authorization header to that
            request = request.clone({
              setHeaders: {
                Authorization: `Bearer ${user.jwt}`
              }
            });
          }
        }
      })
  }
  return next.handle(request);
}

    第二部分让我需要修复更多问题。因此，我会先花点时间了解它（我不知道 pipe 内部的 switchmap 以及返回 Observable<HttpEvent。

    谢谢。

    • 0

相关问题