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实例属性。所有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

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

1 个答案: