在 OAuth 使用哈希重定向后，如果下一个 http 调用失败且选项状态为 0 conn 被拒绝，Angular SPA 不会加载 svg？奇怪的边缘情况

Question

正常行为

用户单击 google 图标，重定向至 google Oauth，成功登录，并使用状态详细信息重定向回 Angular SPA。 SPA 处理状态中的哈希并获取访问令牌以向我们自己的 REST 端点发出 HTTP 请求以进行身份验证。

触发器

如果我们的 REST 应用程序关闭，带有访问令牌的请求将使带有 status 0: Connection Refused 的 OPTIONS 请求失败，然后抛出 HTTP Error status 0。该错误由 catchError 块处理，并通知用户。问题已处理

错误

现在奇怪的是，当上述情况发生在 google 的 OAuth 页面的重定向时，我在我的应用程序中使用的 SVG 图标变为空白。按钮仍然有效并显示在那里，[img] 标签也有效，严格来说是 svg 图标。

现在我的 Microsoft Oauth 登录是用弹出窗口而不是重定向来处理的，当相同的场景失败时，svg 定义很好。

SVG

我有一个可重复使用的组件如下：

icon.ts

  location: string;

  constructor(
    @Optional() @Inject(REQUEST) private request: any,
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    if (isPlatformServer(this.platformId)) {
      this.location = this.request.get('host');
    } else {
      this.location = window.location.href;
    }
  }

  @Input() name: string;
  @Input() size: string;

icon.html

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  [style.width]="size"
  [style.height]="size"
>
  <use
    [style.fill]="color ? color : 'white'"
    [attr.xlink:href]="location + '#' + name"
  ></use>
</svg>

并且定义本身位于一个空组件中，该组件以 display:none

加载到根目录中

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
    <symbol id="icon-name" viewBox="0 0 512 512">
<<<<<<actual svg code stuff>>>>>>>
    </symbol>
</defs>
</svg>

现在我最好的猜测是由于散列而在 icon.ts 中获得 URL 的方式有关，但根据我的想法，我没有成功制作它有效。

Answer 1

我现在拆分绝对 URL 以在哈希开始后删除所有内容：

  location: string;

  constructor(
    @Optional() @Inject(REQUEST) private request: any,
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    if (isPlatformServer(this.platformId)) {
      this.location = this.request.get('host').split('#')[0];
    } else {
      this.location = window.location.href.split('#')[0];
    }
  }

在 OAuth 使用哈希重定向后，如果下一个 http 调用失败且选项状态为 0 conn 被拒绝，Angular SPA 不会加载 svg？奇怪的边缘情况

After OAuth redirect with hash, Angular SPA doesn't load svg's if next http call fails with Options status 0 conn refused? weird edge case

angular

angular-router

angular-oauth2-oidc

正常行为

触发器

错误

SVG