时间戳

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

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

问题描述

正常行为

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

扳机

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

错误

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

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

SVG

我有一个可重用的组件，如下所示：

图标.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;

图标.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 的方式有关，但从我对它的修改来看，我没有成功使它工作。

标签： angularangular-routerangular-oauth2-oidc

解决方案

我现在拆分绝对 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];
    }
  }

推荐阅读