Tengo una aplicación en la que ingreso al usuario conectándome al backend (usando axios) y obteniendo un token JWT que se almacena en localStorage. Mi problema viene con la funcionalidad de cierre de sesión. Actualmente hago esto:
async endAuth(context) { try { await axios.post("auth/logout", { headers: { Authorization: "Bearer " + JSON.parse(localStorage.getItem("currentUser")).token, }, }); localStorage.clear(); context.commit("setUser", { token: null, userId: null, }); } catch (e) { const error = new Error("Something went wrong"); throw error; } } Esto no funciona. La conexión a la API está establecida pero recibo un error 401 del backend con {success: false, message: 'Expired or Invalid Token'}
Ahora intenté agregar "Content-Type": "application/json", a los encabezados aún sin suerte.
También cambié mi código para usar la compilación de JavaScript en la API fetch() . ¡Y eso FUNCIONA! Aquí está el código:
async endAuth(context) { let url = baseURL + "/auth/logout"; const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", Authorization: "Bearer " + JSON.parse(localStorage.getItem("currentUser")).token, }, }); const responseData = await response.json(); if (!response.ok) { const error = new Error( responseData.message || "Failed to authenticate. Check your login data." ); throw error; } else { localStorage.clear(); context.commit("setUser", { token: null, userId: null, }); } } También intenté configurar los encabezados de axios a través axios.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("currentUser").token; - no hubo suerte. ¿Me estoy perdiendo algo aquí con la solicitud de axios?
Solución corta general:
// previus logout this.$axios.setHeader('Authorization', `Bearer ${localStorage.getItem("token")}`); // after logout this.$axios.setHeader('Authorization', null)Solución larga específica (pregunta):
async endAuth(context) { try { this.$axios.setHeader('Authorization', `Bearer ${JSON.parse(localStorage.getItem("currentUser")).token}`); await axios.post("auth/logout"); localStorage.clear(); context.commit("setUser", { token: null, userId: null, }); this.$axios.setHeader('Authorization', null) } catch (e) { const error = new Error("Something went wrong"); throw error; } }Esto me acaba de pasar con nuxt, espero que a alguien más le sirva