从 vue.js 中的注销按钮访问 main.js 中的实例

问题描述

我使用 keycloak-js 像这样验证我的 vue.js（取自：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 秒钟才能让我的用户真正注销。有没有办法直接从组件访问这个 keycloak 实例？

解决方法

我通过将 keycloak 实例添加到 Vue.prototype 解决了这个问题（感谢 @augstin gorni 的提示）

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

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

现在可以在全球范围内访问

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

}