关闭浏览器选项卡并再次打开页面后，如何使用 vue-msal 从 AAD 重新获取令牌？

Question

我有以下代码用于通过 vue-msal 连接到 Azure AD 的基于 Vue JS 的单页应用程序，当我：

• 第一次打开网络应用程序

• 将我带到 AAD 登录页面

• 登录后，将我重定向回我的应用程序

• 然后我可以做一个console.log()并打印出我的访问令牌等以验证登录是否成功并且令牌已成功获取

现在假设我关闭浏览器选项卡。我的登录会话仍然存在（毕竟，我没有删除任何 cookie！）但现在我的访问令牌不见了（大概是因为它被保存为变量而不是 cookie 中）。当我打开一个新选项卡并导航到我的应用程序时，如何重新获取访问令牌？

# main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import msal from 'vue-msal';

Vue.config.productionTip = false

Vue.use(msal, {

  auth: {

    clientId: "CLIENT_ID_OF_MY_SINGLE_PAGE_APPLICATION"

    authority: "https://login.microsoftonline.com/TENANT_ID/",

    redirectUri: "http://localhost:8080/",

    requireAuthOnInitialize: true

  },

  request: {

    scopes: [ `user.read`, `https://backend-api-hosted-on-functionapp.azurewebsites.net/user_impersonation` ]

  },

  graph: {

    callAfterInit: true,

  },

  cache: {

    cacheLocation: "sessionStorage"

  }

});

new Vue({

  router,

  render: h => h(App),

  data: function() {

    return {

      dummyVariable: 'dummyValue',

    }

  },

  created() {

    console.log("User auth status is: " + this.$msal.isAuthenticated());

    console.log("User data object: " + JSON.stringify(this.$msal)) // shows the bearer token the first time, but when I then close the tab and re-open the tab, I see nothing here

  }

}}).$mount('#app')

所以我有几个问题：

1. 如果再次加载应用程序，我是否“注定要”重新获取新令牌？这是传统做法吗？

2. 如果是这样，我该怎么做？我尝试使用：

Answer 1

万一其他人最终看到了这个问题，这不是我的代码本身的问题，而是 vue-msal 和 msal 包之间持续存在的问题，如本 GH 问题所述：https://github .com/mvertopoulos/vue-msal/issues/33