我刚接触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 中缺少一些非常基本的东西。