小编Mic*_*lds的帖子

Angular Web 组件 http 调用不通过客户端 http 拦截器路由

设置:

我有一个 Web 组件(Angular 10)正在 Angular 10 应用程序中使用。Web 组件对 Web API 进行 Httpclient 调用,以获取一些数据来填充菜单下拉列表。该 Web 组件是使用 Angular 10 制作 Web 组件的标准方法制作的。

Web 组件通过主客户端应用程序中的脚本加载。这是来自父应用程序的 angular.json 文件。

1."scripts":
 [
    "projects/web-component-test/src/assets/plugin.bundle.js"
 ]
Run Code Online (Sandbox Code Playgroud)

一切正常,除了我们收到 401 错误(未经授权),因为端点要求用户登录。通过正常工作,还有其他控件可以根据需要显示下拉列表,它从 API 获取数据呼叫不会被填充。

流程:

  1. 用户访问网站,然后提示登录(使用 keycloak Auth)。
  2. 应用程序加载正常,但 Web 组件尝试加载菜单项时出现 401 错误除外。

来自父应用程序的 Http 调用工作正常;jwt 令牌将添加到标头中以调用受保护的 API。来自子 Web 组件的调用在标头中没有 jwt 令牌,因此会失败并出现 401 错误。

httpinterceptor:我们在主客户端应用程序(Web 控件的父级)上有一个 httpinterceptor 。从主应用程序发出的 Http 调用将通过拦截器进行路由,如果需要,令牌将附加到标头。

从子 Web 组件发出的调用不会触发父应用程序中的拦截器?

问题: 如何从子 Web 组件路由通过父级中的 http 拦截器进行调用,以便可以添加令牌。

我尝试过的事情:如果我这样做,我可以让网络组件正常工作:

  1. 当父级加载时,我将令牌存储在本地存储中
  2. 在 Web 组件上使用 http 拦截器,从本地存储中检索令牌并使用它。

** …

web-component angular-http-interceptors

5
推荐指数
1
解决办法
964
查看次数