Доступ к экземпляру в main.js с помощью кнопки выхода в vue.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.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 из компонента?

Используйте $root, чтобы сделать экземпляр keycloak доступным из любой области vue, или, если вы хотите, чтобы он был ограничен, вы можете назначить Vue.mixin только метод выхода из системы (ofc перед инициализацией Vue и где инициализируется keycloak)

bigless 19.12.2020 23:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
2 376
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я решил это, добавив экземпляр 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 между моей главной страницей и дочерним компонентом.

Dave 28.12.2020 12:51

рад, что это помогло, что всегда помнит, что я не просто удаляю вопрос, а отвечаю на него сам, если вы найдете что-то полезное.

Data Mastery 28.12.2020 14:18

В Vue 3 вы можете использовать, как показано ниже;

  app.config.globalProperties.$keycloak = keycloak;

Другие вопросы по теме