vue.js의 로그아웃 버튼으로 main.js의 인스턴스에 액세스합니다.

vue.js의 로그아웃 버튼으로 main.js의 인스턴스에 액세스합니다.

저는 키 잠금 기능을 사용하여 다음과 같이 vue.http://https://www.keycloak.org/securing-apps/vue), 를 인증합니다.main.js:

import { store } from "./store/store";

let keycloak = Keycloak(initOptions);

keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
  if (!auth) {
    window.location.reload();
  } else {
    console.log("Authenticated");
    new Vue({
      vuetify, router, store,
      render: h => h(App,  { props: { keycloak: keycloak } })
    }).$mount('#app')

  }

  const decoded = VueJwtDecode.decode(keycloak.token)
  const roles = decoded.realm_access.roles
  store.commit("storeRoles", roles)

//Token Refresh
  setInterval(() => {
    if(store.state.userData.logged_out) { ### done in vuex
      keycloak.logout()
    } else {
      keycloak.updateToken(70).then((refreshed) => {
        if (refreshed) {
          console.log('Token refreshed' + refreshed);
        } else {
          console.log('Token not refreshed, valid for '
            + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
        }
      }).catch(() => {
        console.log('Failed to refresh token');
      });
    }
  }, 2000)

}).catch(() => {
  console.log("Authenticated Failed");
});

저는 현재 이 문제를 버튼 하나로 처리하기 위해 저희 가게에서 변이를 저지르고 있습니다.

if(store.state.userData.logged_out) { ### done in vuex
    keycloak.logout()
}

## Handles by a button in my view
this.$store.commit("logout", true)

이건 좀 허술한 것 같아서 내 사용자가 실제로 로그아웃 될 때까지 2초 정도 기다려야 합니다.컴포넌트에서 이 키락인스턴스에 직접 액세스할 수 있는 방법이 있나요?

Vue.protype에 keycloak 인스턴스를 추가하여 해결했습니다(힌트를 주셔서 감사합니다@augstin gorni).

https://vuejs.org/v2/cookbook/adding-instance-properties.html

let keycloak = Keycloak(initOptions);
Vue.prototype.$keycloak = keycloak

글로벌하게 액세스 할 수 있게 되었습니다.

logout() {
  this.$keycloak.logout()
}

}

Vue 3에서는 다음과 같이 사용할 수 있습니다.

  app.config.globalProperties.$keycloak = keycloak;

언급URL : https://stackoverflow.com/questions/65372768/access-instance-in-main-js-from-a-logout-button-in-vue-js