Создание одного экземпляра класса в приложении Vue

Question

Я новичок в Vue и изо всех сил пытаюсь обдумать, как реализовать то, что мне кажется хорошим примером для глобальной переменной или синглтона.

Фон в том, что яиспользование Azure AD B2C для проверки подлинности с помощью библиотеки MSAL.MSAL требует, чтобы один экземпляр Msal.UserAgentApplication был объявлен и затем распространен через приложение.

Я борюсь с тем, как объявить этот экземпляр где-то центральным, а затем получить к нему доступ из каждого компонента, включая маршрутизатор..

На данный момент у меня есть класс, который похож на этот пример: https://github.com/sunilbandla/vue-msal-sample/blob/master/src/services/auth.service.js, и когда я хочу использовать методы, которые я делаю:

var authService = new AuthService();
authService.Login();

К сожалению, каждый раз при создании экземпляра класса создается новый экземпляр MSAL, что, в свою очередь, приводило к тому, что мои пользователи оказывались в цикле аутентификации.

Любая помощь будет принята с благодарностью.

Многиеспасибо.

---

Исходя из ответа Тедди, приведенного ниже, я изменил свой main.js следующим образом:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import AuthService from './services/AuthService';

Vue.config.productionTip = false

Vue.prototype.$authService = new AuthService();

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

И мой компонент register.vue следующим образом:

<template>
  <div class="about">
    <h1>This is the register page, it should redirect off to B2C</h1>
  </div>
</template>

<script>
  import router from '@/router.js'

  export default {

    created(){

      this.$authService.isAuthenticated().then(
      function(result){
        if(result){
          router.push('/');  
        }
        else{
          authService.register();  
        }
      });
    }  
  } 
</script>

Компонент говорит, что this.$authService не определено, поэтому он явно не читает прототип.

Такое ощущение, что на данный момент я упускаю что-то действительно фундаментальное в Vue.

Answer 1

Вы можете просто добавить его как свойство экземпляра Vue.Он будет доступен для всех компонентов Vue.

Установите его в main.js следующим образом:

Vue.prototype.$authService = new AuthService();

Позже вы сможете получить к нему доступ в любом компоненте Vue.Например:

this.$authService.Login();

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

Редактировать: Вы должны использовать this. $ Router.push и this. $ AuthService.register внутри обратного вызова isAuthenticated.Если «this» относится к чему-то еще в этом блоке, сохраните var self = this;перед началом обратного вызова или используйте синтаксис жирной стрелки.

<script>
  //No import as router is available in 'this'
  export default {

    created(){
      var self=this; //For use inside the callback
      this.$authService.isAuthenticated().then(
      function(result){
        if(result){
          self.$router.push('/');  
        }
        else{
          self.$authService.register();  
        }
      });
    }  
  } 
</script>

Редактировать 2:

Возможно, вы можете создать сам экземпляр (singleton) в файле с именем AuthServiceInst.js.Затем вы можете импортировать его как в main.js, так и router.js.

Новый файл AuthServiceInst.js:

import AuthService from './AuthService.js'

export const authService = new AuthService();

main.js:

import {authService} from './AuthServiceInst.js'

Vue.prototype.$authService = authService;

router.js:

import {authService} from './AuthServiceInst.js'

//Now you can use authService