从 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)

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

Answer 1

我通过将 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()
}

}

Answer 2

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

  app.config.globalProperties.$keycloak = keycloak;

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

Access Instance in main.js from a logout button in vue.js

javascript

mutation

vue.js

keycloak

vuex