Initialiser l'application Svelte en fonction de la promesse

Question

J'ai déjà développé plusieurs applications Vue qui utilisaient Keycloak pour l'authentification et l'autorisation. Pour les applications Vue, Keycloak fournit une solution garantissant que les utilisateurs non authentifiés ne peuvent pas charger les applications Vue en initialisant l'application uniquement lorsque l'utilisateur est authentifié.

keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
  si (!auth) {
    window.location.reload();
  } autre {
    Vue.$log.info("Authentifié");

    nouvelleVue({
      el : '#app',
      rendu : h => h(App, { accessoires : { keycloak : keycloak } })
    })
  }
...
≪/pré>
Maintenant, je travaille sur un projet Svelte et je souhaite appliquer la même approche. Existe-t-il un moyen d'initialiser une application Svelte basée sur Promises, de la même manière que dans Vue à l'aide de Keycloak ? 
J'ai essayé de chercher une solution, mais je ne trouve rien qui résolve spécifiquement ce problème pour Svelte. 
Le plus grand avantage pour moi est que vous êtes toujours sûr à 100 % que l'utilisateur est authentifié et que vous avez toujours accès au jeton JWT à envoyer au backend si nécessaire. 
            

Answer 1

Lorsque vous utilisez Svelte seul, vous pouvez utiliser l'API des composants côté client

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

Dans une application SvelteKit, vous pouvez ajouter un comportement global en utilisant 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}

L'authentification échoue lorsque data.keycloakn'est pas défini. Cela permet le rendu conditionnel du contenu.

(l'exemple de code suppose que le keycloak est l'authentification du client)