Mi página de inicio de sesión envía el nombre de usuario/contraseña al backend, recibe el token jwt, lo guarda en las cookies y lo redirige a /home.
La ruta /home tiene verificación de autenticación al obtener la cookie por nombre. El problema es que, en este momento, cuando se verifica la autenticación inmediatamente después de iniciar sesión, el token no está definido y no se realiza ninguna redirección.
enrutador
const routes = [ { path: '/login', component: Login, beforeEnter: (to, from, next ) => { if(isAuthenticated()) next("/home"); else next() } }, { path: '/', redirect: '/login' }, { path: '/home', component: Menu } ]; router.beforeEach((to, from, next) => { if(!isAuthenticated() && to.path !== '/login') next('/login'); else next(); });middleware de verificación de autenticación
export const isAuthenticated = () => { const token = getCookie("token"); console.log(token) if (token) { const jwt = parseJwt(token) if (Date.now() >= jwt.exp * 1000) { console.log('unauthenticated - expired token') return false } else { console.log('authenticated - valid token') return true } } else { console.log('unauthenticated - no token in cookie') return false } } const getCookie = (name) => { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift(); } const parseJwt = (token) => { var base64Url = token.split('.')[1]; var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); return JSON.parse(jsonPayload); }Almacenar acción
login({ commit }, loginRequest) { commit("LOGIN_PENDING") axios.post("/api/login", loginRequest) .then( (response) => { document.cookie =`token=${response.data.token}`; commit("SET_TOKEN", response.data.token); commit("LOGIN_COMPLETE"); }, (error) => { if(error.response.status==401) { commit("SET_INVALID_LOGIN_CREDENTIALS", true); commit("LOGIN_COMPLETE"); } } ) } ¿Cómo guardar el token en la cookie (document.cookie = token=${response.data.token} ; ) y esperar hasta que se guarde antes de continuar con los siguientes pasos?
¡Cualquier ayuda es apreciada!
si todo lo que desea es almacenar el estado de autenticación, le sugiero que use la sesión de cookies en el backend... automáticamente manejará todo esto por usted: https://www.npmjs.com/package/cookie-session
Descubrí el motivo del problema: la acción de inicio de sesión en vuex no se declaró asíncrona, por lo que agregué asincrónica al inicio de sesión, esperé a la publicación de axios y el problema se resolvió.
async login({ commit }, loginRequest) { commit("LOGIN_PENDING") await axios.post("/api/login", loginRequest) .then( (response) => { document.cookie =`token=${response.data.token}`; commit("SET_TOKEN", response.data.token); commit("LOGIN_COMPLETE"); }, (error) => { if(error.response.status==401) { commit("SET_INVALID_LOGIN_CREDENTIALS", true); commit("LOGIN_COMPLETE"); } } ) }