Initialisieren Sie die Svelte-Anwendung basierend auf dem Versprechen

Question

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.

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 } })
    })
  }
...

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?

Ich habe versucht, nach einer Lösung zu suchen, kann aber nichts finden, das dieses Problem speziell für Svelte angeht.

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.

Answer 1

单独使用 Svelte 时，您可以使用 Client-侧组件API

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 } })
    })
  }

在 SvelteKit 应用中，您可以使用 src/routes/+layout.js 添加全局行为：

// 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}

当data.keycloak未定义时，认证失败。 这允许有条件地渲染内容。

（代码示例假设 keycloak 是客户端身份验证）