<p>Ich habe zuvor mehrere Vue-Anwendungen entwickelt, die Keycloak zur Authentifizierung und Autorisierung verwendeten. Für Vue-Anwendungen bietet Keycloak eine Lösung, um sicherzustellen, dass nicht authentifizierte Benutzer keine Vue-Anwendungen laden können, indem die Anwendung nur dann initialisiert wird, wenn der Benutzer authentifiziert ist. </p> <pre class="brush:js;toolbar:false;">keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => { if (!auth) { window.location.reload(); } anders { Vue.$log.info("Authentifiziert"); newVue({ el: '#app', render: h => h(App, { props: { keycloak: keycloak } }) }) } ... </pre> <p>Jetzt arbeite ich an einem Svelte-Projekt und möchte denselben Ansatz anwenden. Gibt es eine Möglichkeit, eine Svelte-Anwendung basierend auf Promises zu initialisieren, ähnlich wie es in Vue mit Keycloak gemacht wird? </p> <p>Ich habe versucht, nach einer Lösung zu suchen, kann aber nichts finden, das dieses Problem speziell für Svelte angeht. </p> <p>Der größte Vorteil für mich besteht darin, dass Sie immer zu 100 % sicher sind, dass der Benutzer authentifiziert ist, und Sie immer Zugriff auf das JWT-Token haben, um es bei Bedarf an das Backend zu senden. </p>

import App from "./App.svelte"

keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
  if (!auth) {
    window.location.reload();
  } else {
    new App({
      target: document.getElementById('#app'),
      props: { keycloak: keycloak } })
    })
  }

// layout.js
import { browser } from "$app/environment";

/**
 * @type {import('./$types').LayoutLoad}
 */
export const load = async () => {
  let keycloakPromise;
  if (browser) {
    keycloakPromise = keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
      if (auth) {
        return keycloak;
      }
    });
  }
  return {
    keycloak: keycloakPromise,
  };
};

<!-- layout.svelte -->
<script>
  import { onMount } from "svelte";

  /** @type {import('./$types').LayoutData} */
  export let data;

  onMount(() => {
    if (!data.keycloak) {
      window.location.reload();
    }
  });
</script>

{#if data.keycloak}
  <slot />
{/if}