根據承諾初始化 Svelte 應用程式

Question

我之前開發過幾個使用 Keycloak 進行身份驗證和授權的 Vue 應用程式。對於Vue應用程序，Keycloak提供了一種解決方案，透過僅在用戶通過身份驗證時初始化應用程式來確保未經身份驗證的用戶無法載入Vue應用程式。

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

    new Vue({
      el: '#app',
      render: h => h(App, { props: { keycloak: keycloak } })
    })
  }
…

現在，我正在開發 Svelte 項目，我想應用相同的方法。有沒有一種方法可以基於 Promise 初始化 Svelte 應用程序，類似於在 Vue 中使用 Keycloak 完成的方式？

我已經嘗試尋找解決方案，但我找不到任何專門針對 Svelte 解決此問題的內容。

對我來說，最大的優勢是您始終 100% 確定用戶已通過身份驗證，並且您始終可以訪問 JWT 令牌以在必要時發送到後端。

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 是客戶端身份驗證）