在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实例，这又导致我的用户最终陷入了身份验证循环。

任何帮助将不胜感激。

非常感谢。

---

从以下Teddy的答案开始，我对我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 3 中，要声明全局实例，您需要使用app.config.globalProperties. 这是 Vue 2 的替代品Vue.prototype，在 Vue 3 中不再存在。与任何全局的东西一样，应该谨慎使用它。

// main.js
const app = createApp(App)
  .use(router)
  .use(store)
  .use(vuetify)

app.config.globalProperties.msg = 'hello world'

app.mount('#app')

这使得msg在应用程序中的任何组件模板内以及任何组件实例上都可用：

export default {
  mounted() {
    console.log(this.msg) // 'hello world'
  }
}

来源：文档

Answer 2

您可以将其添加为Vue实例属性。所有Vue组件都将在那里。

像这样在main.js中进行设置：

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

您以后可以在任何Vue组件中访问它。例如：

this.$authService.Login();

请参阅：https： //vuejs.org/v2/cookbook/adding-instance-properties.html

编辑：您必须在isAuthenticated回调中使用this。$ router.push和this。$ authService.register。如果“ 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：

也许您可以在一个名为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