如何基于Promise实现Svelte应用的Keycloak认证后初始化？

完全可以实现和你Vue项目中一模一样的逻辑——通过Keycloak的初始化Promise控制Svelte应用的挂载时机，确保只有认证通过的用户才能加载应用内容。

具体实现代码 #

在Svelte的入口文件（通常是src/main.js）中，按照以下方式集成Keycloak：

import Keycloak from 'keycloak-js';
import App from './App.svelte';

// 初始化Keycloak客户端
const keycloak = new Keycloak({
  url: 'https://你的Keycloak服务器地址/auth',
  realm: '你的Realm名称',
  clientId: '你的客户端ID'
});

// 初始化配置，和Vue中一致
const initOptions = {
  onLoad: 'login-required' // 可选值：'login-required' 强制登录 / 'check-sso' 检查登录状态
};

// 基于Promise控制应用初始化
keycloak.init(initOptions).then((auth) => {
  if (!auth) {
    // 认证失败，刷新页面重新触发登录流程
    window.location.reload();
  } else {
    console.log('用户已完成认证');
    // 认证成功后，才挂载Svelte应用
    new App({
      target: document.getElementById('app'),
      props: {
        keycloak // 将Keycloak实例传递给根组件
      }
    });
  }
}).catch(err => {
  console.error('Keycloak初始化失败:', err);
});

在组件中使用Keycloak实例 #

根组件App.svelte可以通过props接收Keycloak实例，之后可在任意子组件中传递或直接使用：

<script>
  export let keycloak;

  // 示例：获取当前用户信息
  const userName = keycloak.idTokenParsed?.name;
  // 示例：获取JWT令牌用于后端请求
  const getAuthToken = () => keycloak.token;
</script>

<div class="app-container">
  <h1>欢迎，{userName}</h1>
  <button on:click={() => keycloak.logout()}>退出登录</button>
</div>

为什么这种方式可行？ #

Svelte的应用挂载逻辑本身就是通过实例化根组件实现的，和Vue的new Vue(...)逻辑本质一致——只要把实例化代码放在Keycloak认证成功的回调里，就能确保只有认证用户能加载应用。这种方式的优势和你Vue项目里完全相同：

• 100%拦截未认证用户，无法访问任何应用内容
• 全局持有Keycloak实例，随时可以获取JWT令牌向后端发起请求
• 和Vue项目保持一致的认证流程，降低跨项目维护成本

内容的提问来源于stack exchange，提问作者studio-pj