Para adelantar esto, soy un novato en la programación de JS, soy un tipo de .net, por lo que esta puede ser la fuente de la fusión.
En mi PageLayout.vue, en el evento creado, estoy tratando de hacer cosas de autenticación (usando okta)
El error que estoy recibiendo es:
No capturado (en promesa) TypeError: _this.$auth.getAccessToken(...).then no es una función en eval (PageLayout.vue?66f1:87)
pero justo encima de la llamada a getAccessToken, la llamada a this.$auth.GetUser() es un éxito, estamos literalmente en la llamada de ese método.
¿Este cambia el alcance en la llamada entonces?
Entonces, ¿por qué this.$store.commit('SET_OKTA_USER', user) tiene éxito justo antes?
created() { this.$store.commit('SET_LOADING_APP', true) this.$auth.getUser().then((user) => { // Set Okta user if (user == null && user == undefined) { // no user this.$store.commit( 'SET_RESPONSE_MSG', 'Okta user is null or undefined.' ) this.$store.commit('SET_RESPONSE_TYPE', 'error') } else { // store user this.$store.commit('SET_OKTA_USER', user) // store token this.$auth.getAccessToken().then((token) => { //<---------blow up here saying it's not a function. this.$store.commit('SET_ACCESS_TOKEN', token) localStorage.setItem('token', JSON.stringify(token)) apiClient.defaults.headers.common.Authorization = `Bearer ${token}` }) // adName const adName = user.preferred_username.substr( 0, user.preferred_username.indexOf('@') ) this.$store.commit('SET_AD_NAME', adName) this.getUserInfo(adName) } }) },No sé por qué el código anterior es válido, pero getAccessToken no lo es.
si pego
const accessToken = this.$auth.getAccessToken(); if (accessToken != undefined) { this.setUserToken(accessToken); this.getUserInfo(this.$store.state.adName); }Inmediatamente encima de this.$auth.getAccessToken().then... parece funcionar bien.
Estoy bastante seguro de que este es un problema de alcance variable, pero no estoy completamente seguro de cómo describirlo.
Básicamente, la función anónima a la que then está pasando es la creación de un nuevo ámbito privado,
this.$auth.getUser().then((user)=>{ //this no longer exists like you expect it to }); La solución más simple que se me ocurre sería cambiar su método created() a asíncrono para que pueda volver a trabajar en algo como esto:
async created(){ let user = await this.$auth.getUser(); //do some stuff let token = await this.$auth.getAccessToken(); }