Compruebe si Axios tiene una cookie de sesión

Aug 20 2020

Estoy implementando un protector de navegación para mi aplicación Vue.js, verificando si el usuario está conectado. Creo que la mejor manera sería preguntar a Axios si tiene una cookie de sesión o no. Algo como esto:

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

Excepto, por supuesto, hasSessionCookie()que no existe, y no veo nada parecido en los documentos. ¿Hay alguna forma, tal vez por alguna extensión?

Sí, sé que podría almacenar el estado de inicio de sesión en la tienda VueX. No creo que sea una buena idea porque el estado se restablecería si el usuario, en su sabiduría infinita, actualizara la página y así restableciera la aplicación. Otra solución que tengo en mente es un endpoint de backend donde la aplicación puede "preguntar" si ha iniciado sesión. Pero eso también es bastante poco convincente.

Respuestas

2 TamásPolgár Aug 20 2020 at 06:45

Gracias por todos los consejos. La solución correcta fue la siguiente:

  • VueX almacena el estado de inicio de sesión (simplemente una bandera booleana) que el guardia de navegación verifica
  • Cuando el usuario inicia o cierra sesión, pongo la bandera
  • Cuando se inicia la aplicación, llamo a la /checkloginruta en el servidor antes de que se cree la instancia de Vue. Esto simplemente devuelve un código de estado 200 o 401 dependiendo de si el usuario tiene una sesión válida o no. Luego configuré la bandera VueX en consecuencia. De esta manera, el usuario puede actualizar el navegador, pero VueX aún sabrá si ha iniciado sesión o no.
  • Además, agregué un interceptor Axios para detectar errores 401. Si hay uno, significa que la sesión ha expirado. Luego establece el indicador VueX falsey redirige al usuario a la página de inicio de sesión.

Escribí un artículo en mi blog de Medium con detalles y fragmentos si a alguien le importa. https://medium.com/developer-rants/session-management-between-express-and-axios

1 Owl Aug 20 2020 at 03:54

Dado que es una cookie del lado del servidor, no puede verificarla en javascript del lado del cliente, debe realizar una solicitud HTTP a su servidor expreso para verificar si existe una sesión. Cree una ruta simple en su servidor express como esta:

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

Luego, verifique su guardia de navegación vue:

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}
Akbarkhan Aug 20 2020 at 03:16

Vas en la dirección correcta, pero axios es un cliente HTTP y no tiene nada que ver con las cookies ni le importan las cookies o el almacenamiento ... así que necesitas usar un paquete como vue-cookies para configurar y obtener cookies.

generic3892372 Nov 01 2020 at 21:47

Tamás Polgár, documentaste exactamente el mismo desafío que tuve con Vue; qué hacer con el inicio de sesión si ocurre un evento inesperado en el navegador y se pierde la tienda.

La tienda Vue:

La tienda Vue está destinada a ser una ubicación conveniente para que un SPA almacene dicha bandera (con sesión iniciada o no), sin embargo, la tienda se borra por completo y se restablece con cada instancia de Vue, lo que significa una nueva ventana / pestaña del navegador, actualización u otro evento inesperado que desencadena una actualización del navegador.

Entonces, su enfoque describe una llamada de back-end adicional para verificar rápidamente el estado, que es una solución legítima y viable, en mi opinión.

También hay dos soluciones potenciales más, la segunda de las cuales he implementado en mi propio SPA:

Otras dos soluciones

1) No toque su código de back-end en absoluto. Utilice vue-cookies para que el navegador del cliente establezca una cookie una vez que se haya establecido un inicio de sesión (esto sería completamente independiente de la cookie de solo http que necesita el servidor de API back-end).

Esta cookie aún debería existir después de una actualización del navegador. Sin embargo, no utilicé (ni probé) este enfoque, ya que no quería perder el tiempo alterando mi interfaz para verificar una cookie local cada vez que quiero verificar el estado de inicio de sesión.

El código de la interfaz podría usar esta cookie para averiguar si la persona aún está conectada o no.

2) Otro enfoque separado es cortocircuitar la verificación de la API de back-end normal para la autenticación solo para el controlador de esa ruta específica , pero no para ninguna otra ruta.

Así es como funcionaría un 'cortocircuito' en el back-end:

En el caso del método de controlador de esa ruta específica, primero haga que verifique la existencia del usuario en la solicitud y luego devuelva un 200 pero con un estado de "falso" o alguna otra variable que también aparezca en la respuesta de éxito.

Es contrario a la intuición, pero esto le da a la llamada frontal de Axios algo a lo que agarrarse más que una respuesta de error estándar.

NOTA : Yo lo llamo un "cortocircuito" porque si el método del controlador de la ruta de la API de back-end tiene mucho código, hacer que esta verificación sea lo PRIMERO que hace evitará la parte costosa de la llamada.

Este enfoque funciona perfectamente para mis necesidades y no requiere una llamada API nueva o secundaria.