根据承诺初始化 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 是客户端身份验证）