主页 / user-11065837

D052057's questions

Martin Hope
D052057
Asked: 2025-01-09 17:41:29 +0800 CST
  • 7

我的应用程序/项目的环境和功能：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
Martin Hope
D052057
Asked: 2024-01-01 06:39:28 +0800 CST
  • 6

这是我的html：

<a class="dropdown-item" [routerLink]="['/videos', p.param]">{{ p.title }}</a>

这是app.route.ts中的代码：

{
    path: 'videos/:folder',
    loadComponent: () => import('./pages/application/video/video.component')
      .then(mod => mod.VideoComponent)
  },

这是 VideoComponent 中的代码（是一个独立的组件，我尝试获取值文件夹：

ngOnInit(): void {
    this.route.paramMap
      .subscribe(
        (params: any) => {
          console.log("value params folder:" + params);
          this.folder = params.folder; <--- no value.
        }
      )
  
  }

并且 params.folder 没有值。我用谷歌搜索但没有看到任何东西。
独立组件是否支持此功能，或者是否有办法通过独立组件传递参数？有没有任何链接/示例如何做到这一点？

谢谢

angular