关闭浏览器选项卡并再次打开页面后，如何使用 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')

所以我有几个问题：

如果再次加载应用程序，我是否“注定要”重新获取新令牌？这是常规做法吗？
如果是这样，我该怎么做？我尝试使用 using:

    if ((this.$msal.data.isAuthenticated == false) || (this.$msal.data.accessToken == false)) {
      console.log("New token required");
      this.$msal.signIn();
      console.log("User data object: " + JSON.stringify(this.$msal))
    }

但不幸的是，这并没有给我任何回报。

Answer 1

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

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

How do I re-acquire a token from AAD using vue-msal after I close the browser tab and open the page again?

javascript

vue.js

vuejs2

adal

msal