Я использую 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.info("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.info('Token refreshed' + refreshed);
} else {
console.info('Token not refreshed, valid for '
+ Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
}
}).catch(() => {
console.info('Failed to refresh token');
});
}
}, 2000)
}).catch(() => {
console.info("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://v2.vuejs.org/v2/cookbook/adding-instance-properties.html
let keycloak = Keycloak(initOptions);
Vue.prototype.$keycloak = keycloak
Теперь он доступен по всему миру
logout() {
this.$keycloak.logout()
}
}
Спасибо за это, я прочитал одно или два решения о том, как выйти из системы, все они предлагают мне вызвать URL-адрес (это решение предназначено только для Java). Я подозревал, что информация неверна, и искал способ передать объект keycloak между моей главной страницей и дочерним компонентом.
рад, что это помогло, что всегда помнит, что я не просто удаляю вопрос, а отвечаю на него сам, если вы найдете что-то полезное.
В Vue 3 вы можете использовать, как показано ниже;
app.config.globalProperties.$keycloak = keycloak;
Используйте $root, чтобы сделать экземпляр keycloak доступным из любой области vue, или, если вы хотите, чтобы он был ограничен, вы можете назначить Vue.mixin только метод выхода из системы (ofc перед инициализацией Vue и где инициализируется keycloak)