Tengo el siguiente código para una aplicación de página única basada en Vue JS que se conecta a Azure AD a través de vue-msal que funciona cuando yo:

  • abre la aplicación web por primera vez
    • me lleva a la página de inicio de sesión de AAD
    • una vez que inicie sesión, me redirige a mi aplicación
  • Luego puedo hacer un console.log() e imprimir mi token de acceso, etc. para verificar que el inicio de sesión fue exitoso y que el token fue adquirido exitosamente.

Ahora suponga que cierro la pestaña del navegador. Mi sesión de inicio de sesión todavía está allí (después de todo, ¡no he eliminado ninguna cookie!) Pero ahora mi token de acceso se ha ido (presumiblemente porque se guardó como una variable en lugar de como una cookie). ¿Cómo vuelvo a adquirir el token de acceso cuando abro una nueva pestaña y navego a mi aplicación?

# 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')

Entonces tengo algunas preguntas:

  1. ¿Estoy "destinado a" volver a adquirir un nuevo token si la aplicación se carga de nuevo? ¿Es esta una práctica convencional?

  2. Si es así, ¿cómo lo hago? Intenté usar usando:

    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))
    }

Pero eso no me devuelve nada, lamentablemente.

0
chivano 2 ago. 2020 a las 23:52

1 respuesta

La mejor respuesta

En caso de que alguien más termine viendo esta pregunta, esto no es un problema con mi código como tal, sino un problema continuo entre vue-msal y los paquetes msal, como se explica en este número de GH: https://github.com/mvertopoulos/vue-msal/issues/33

1
chivano 3 ago. 2020 a las 20:06