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

Question

我使用 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)

这似乎有点 hacky，我必须等待 2 秒才能让我的用户真正退出。 有没有办法从组件直接访问这个 keycloak 实例？

Answer 1

我通过将 keycloak 实例添加到 Vue.prototype 来解决它（感谢@augstin gorni 的提示）

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

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

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

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

}

Answer 2

在 Vue 3 中，您可以像下面这样使用；

  app.config.globalProperties.$keycloak = keycloak;