Promise를 기반으로 Svelte 애플리케이션 초기화

Question

저는 이전에 인증 및 승인을 위해 Keycloak을 사용하는 여러 Vue 애플리케이션을 개발했습니다. Vue 애플리케이션의 경우 Keycloak은 사용자가 인증될 때만 애플리케이션을 초기화하여 인증되지 않은 사용자가 Vue 애플리케이션을 로드할 수 없도록 하는 솔루션을 제공합니다.

keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
  만약 (!auth) {
    window.location.reload();
  } 또 다른 {
    Vue.$log.info("인증됨");

    newVue({
      엘: '#앱',
      렌더링: h => h(App, { props: { keycloak: keycloak } })
    })
  }
...

이제 저는 Svelte 프로젝트를 진행하고 있으며 동일한 접근 방식을 적용하고 싶습니다. Keycloak을 사용하여 Vue에서 수행되는 방식과 유사하게 Promises를 기반으로 Svelte 애플리케이션을 초기화하는 방법이 있습니까?

해결책을 찾으려고 노력했지만 Svelte에 대한 이 문제를 구체적으로 해결하는 내용을 찾을 수 없습니다.

저에게 가장 큰 장점은 사용자가 인증되었음을 항상 100% 확신하고 필요할 때 백엔드로 보낼 JWT 토큰에 항상 액세스할 수 있다는 것입니다.

Answer 1

Svelte를 단독으로 사용하는 경우 클라이언트 측 구성 요소 API

를 사용할 수 있습니다. 으아악

SvelteKit 앱에서는 src/routes/+layout.js를 사용하여 전역 동작을 추가할 수 있습니다.

으아악 으아악

data.keycloak이 정의되지 않은 경우 인증이 실패합니다. 이를 통해 콘텐츠의 조건부 렌더링이 가능합니다.

(코드 예제에서는 keycloak이 클라이언트 인증이라고 가정합니다.)