访问 vue 外部的 vue-msal 插件暴露对象

Posted 2023-02-22

【中文标题】访问 vue 外部的 vue-msal 插件暴露对象

【英文标题】：Acces vue-msal plugin's exposed object outside of a vue

【发布时间】：2021-01-22 02:58:27

【问题描述】：

我使用 vue-msal 插件 https://www.npmjs.com/package/vue-msal-2#auth-options--required- 为我的应用处理 microsoft 和 azure AD 身份验证。 在 vue 内部时，我可以毫无问题地使用 this.$msal 来使用暴露的方法，例如 signIn()，但我想做的是从 vue 外部访问这个对象。例如，我想创建如下服务：

import msal from 'vue-msal';
import store from '@/store';

export default 
  logIn(): void 
    msal.signIn();
  ,

  logOut(): void 
    msal.signOut();
  ,

  isAuthenticated(): boolean 
    return store.getters.logged;
  ,

  acquireToken(): Promise<string> 
    return msal.acquireToken();
  ,

  onLoginSuccess(): void 
    console.log('login success');
    this.acquireToken().then(token => store.commit('login', token));
  
;

然而这里的msal 指的是mixin 的数据对象，因此与$msal 不同。有没有办法从我的服务访问$msal？

【问题讨论】：

遇到了同样的问题。在服务类中使用 this.$msal 运气好吗？

【参考方案1】：

为什么不改用 mixin？

import Vue from "vue";
import "./vue-msal.js";

Vue.mixin(
  methods: 
   signOut() 
      this.$msal.signOut();
   ,
   isAuthenticated() 
      return this.$msal.isAuthenticated();
   
  
);     

这样，您仍然可以实现相同的目标。