在 Vue3 中使用 keycloak，但不是在启动时

Question

I have a problem with keycloak.js in my Vue3 application

const keycloak = Keycloak(keycloakOptions)

keycloak.init({
  onLoad: 'login-required',
  checkLoginIframe: false
}).then(async (auth) => {
  if (!auth) {
    window.location.reload()
  } else {
    const app = createApp(App)
    app.provide(process.env.VUE_APP_KEYCLOAK_PROVIDE_VARIABLE, keycloak)
    app.use(store)

    await store.dispatch('keycloakStore/fillRoles', keycloak.realmAccess.roles)

    app.use(router)
    app.mount('#app')
  }
}).catch((e) => {
  console.log('Serwer lezy: ' + e)
})

I have the above code in my main.js file. This runs the keycloak subpage with login/register. If someone succesfully logs in, my Vue app starts. Now, instead of the above, I'd like to make it so the Vue app starts regardless of the person being logged in and the keycloak screen is ONLY launched if someone clicks a specified button in the UI. I've searched examples on the net, but i can only find ones that run keycloak on application start. Can someone help?

Answer 1

Turn onLoad value from 'login-required' to 'check-sso'. This option will only verify if the user is logged in without redirecting the user to login, and setup authentication properties acordingly.

Then you can call keycloak.login(), for example in your code. Together with route guards if necessary.

Also, put the creation of the app out of the else block, because it will not load if the user is not logged in when you have 'check-sso'.