Comportamiento normal

El usuario hace clic en el icono de Google, vuelve a acceder a Google Oauth, inicia sesión correctamente, se redirige con los detalles del estado a Angular SPA. El SPA procesa el hash en el estado y toma el token de acceso para realizar una solicitud HTTP a nuestro propio punto final REST para la autenticación.

Detonante

Si nuestra aplicación REST está inactiva, esa solicitud con el token de acceso fallará la solicitud OPTIONS con status 0: Connection Refused y luego arrojará un HTTP Error status 0. Ese error lo maneja el bloque catchError y se notifica al usuario al respecto. El problema se maneja

El error

Ahora, la parte extraña es que, cuando el escenario anterior ocurre con un redireccionamiento desde la página OAuth de Google, los íconos SVG que tengo en toda mi aplicación se quedan en blanco. Los botones todavía funcionan y aparecen allí, las etiquetas [img] también funcionan, estrictamente los iconos svg.

Ahora mi inicio de sesión de Oauth para microsoft se maneja con una ventana emergente en lugar de una redirección y cuando falla el mismo escenario, las definiciones de svg están bien.

Los SVG

Tengo un componente reutilizable de la siguiente manera:

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>

Y las definiciones mismas están en un componente vacío cargado en la raíz con 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>

Ahora, mi mejor suposición tiene que ver con la forma en que se obtiene la URL en icon.ts debido al hash, pero por lo que he manipulado, no he logrado que funcione.

1
SebastianG 3 oct. 2019 a las 12:17

1 respuesta

La mejor respuesta

Ahora estoy dividiendo la URL absoluta para eliminar todo después de que comience un hash:

  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];
    }
  }
0
SebastianG 9 oct. 2019 a las 09:46