Vue.js 在 Vue 应用程序中创建一个类的单个实例

我是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');

还有我的登记簿.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中真正基本的东西.