Estoy tratando de hacer que el axios espere hasta que finalice una llamada adicional en el interceptor. Así que estoy usando NuxtJS como SPA y API frontend en Laravel 8.
Probé muchas cosas diferentes en el transcurso de los últimos ~ 4 días, pero nada parece funcionar.
LA META
Necesito mi interceptor de SOLICITUD axios para verificar la existencia de la cookie. Si la cookie no está presente, primero debo hacer una llamada API para tomar la cookie y luego podemos continuar con cualquier otra solicitud.
¿QUÉ ESTOY HACIENDO?
Básicamente, tengo el interceptor Axios para las solicitudes que llamarán al punto final de la cookie si la cookie no existe.
También estoy guardando la promesa de solicitud de cookies para que se reutilice en caso de que haya varias llamadas y la cookie aún no esté allí.
PROBLEMA
Si bien se suponía que solo debía llamar a la API de cookies primero y todo lo demás después, en su mayoría obtengo dos resultados en diferentes variaciones del código adjunto.
A) Estoy haciendo una llamada de cookie adicional, pero no está en el orden requerido, por lo que sigo accediendo al punto final de laravel varias veces sin cookies, lo que provoca que se generen sesiones adicionales.
B) No está haciendo ninguna llamada (ejemplo adjunto).
¿Alguien sabe qué demonios estoy confundiendo aquí?
export default function ({$axios, redirect, $cookiz, store}) { $axios.onRequest(async request => { // make sure that XSRF cookie exists before we make aby calls to prevent backend from // creating multiple session when page on load calls more than one endpoint, if we don't have // that cookie we will first have to get it and then call the rest of the endpoints const xsrfCookie = $cookiz.get('XSRF-TOKEN') if (xsrfCookie === undefined || xsrfCookie === null || xsrfCookie === '') { await store.dispatch('login/getXsrfCookie') $axios.request(request) } $axios.request(request) }) } getXsrfCookie(context) { if (context.state.xsrfCookiePromise instanceof Promise) { return context.state.xsrfCookiePromise } const xsrfCookiePromise = this.$axios.get('/csrf-cookie').then(response => { context.commit('setXsrfCookiePromise', null) console.log('This is the cookie response', response) }) context.commit('setXsrfCookiePromise', xsrfCookiePromise) return context.state.xsrfCookiePromise }No sé nada sobre nuxt, y solo tengo una vaga idea sobre los interceptores axios, pero solo mirando el código...
set es lo que necesita. (es posible que necesite un parámetro de opciones, descrito aquí ) async getXsrfCookie() { if (!$cookiz.get('XSRF-TOKEN')) { // the op should double check which part of the response to persist, whether to stringify it, etc. const response = await this.$axios.get('/csrf-cookie'); $cookiz.set('XSRF-TOKEN', response.data); } } export default function ({$axios, redirect, $cookiz, store}) { $axios.onRequest(async request => { await getXsrfCookie(); return $axios.request(request) }) }