Mulakan aplikasi Svelte berdasarkan janji

Question

Saya sebelum ini telah membangunkan beberapa aplikasi Vue yang menggunakan Keycloak untuk pengesahan dan kebenaran. Untuk aplikasi Vue, Keycloak menyediakan penyelesaian untuk memastikan pengguna yang tidak disahkan tidak boleh memuatkan aplikasi Vue dengan hanya memulakan aplikasi apabila pengguna disahkan.

keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
  jika (!auth) {
    window.location.reload();
  } lain {
    Vue.$log.info("Disahkan");

    newVue({
      el: '#app',
      render: h => h(Apl, { props: { keycloak: keycloak } })
    })
  }
...

Sekarang, saya sedang mengusahakan projek Svelte dan saya mahu menggunakan pendekatan yang sama. Adakah terdapat cara untuk memulakan aplikasi Svelte berdasarkan Janji, sama seperti cara ia dilakukan dalam Vue menggunakan Keycloak? 
Saya telah cuba mencari penyelesaian tetapi saya tidak menemui apa-apa yang menangani isu ini secara khusus untuk Svelte. 
Kelebihan terbesar kepada saya ialah anda sentiasa 100% pasti bahawa pengguna itu disahkan dan anda sentiasa mempunyai akses kepada token JWT untuk dihantar ke bahagian belakang apabila perlu. 
            

Answer 1

Apabila menggunakan Svelte sahaja, anda boleh menggunakan API komponen sisi pelanggan

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

Dalam apl SvelteKit, anda boleh menambah gelagat global menggunakan 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}

Pengesahan gagal apabila data.keycloaktidak ditentukan. Ini membenarkan pemaparan kandungan bersyarat.

(contoh kod menganggap keycloak adalah pengesahan pelanggan)