Cerrar sesión por inactividad en Laravel con Vue 3
Es muy probable que los usuarios de nuestras aplicaciones sea por despiste o por cualquier imprevisto dejen sus sesiones abiertas durante largos periodos. En esta entrada cubrimos la base para que sepas cómo puedes mostrar una ventana modal que bloquee la pantalla cuando la inactividad del usuario sea del x minutos, tú lo puedes configurar fácilmente.
Además de mostrar una ventana modal que bloquee la pantalla, también es importante lanzar una petición al servidor para eliminar la sesión del usuario, ya que un usuario con conocimientos de HTML y muy malas intenciones podría ocultar esa ventana modal con el inspector del navegador y nuestro trabajo no serviría para mucho.
Pero si lo que quieres es cerrar sesión y abandonar la pantalla en la que se encontraba el usuario actualmente, lo mejor en este caso es además de cerrar sesión desde el cliente con Vue, hacer un redirect a la página de login con una sesión flash, así nos olvidamos de cualquier tipo de problema.
Por cierto, si todavía no sabes cómo instalar Vue 3 en Laravel, revisa esta entrada, a día de hoy es necesario hacerlo así. Instalar y configurar useIdle Lo primero que debemos hacer es instalar useIdle. Si no conoces VueUse, no te pierdas la ruta de Vue 3.
Esta dependencia nos permite escuchar los eventos del usuario en cada interacción con nuestra página, click, movimiento de mouse etcétera.
Ahora vamos a crear un componente Modal con TailwindCSS 2 y añadir toda la lógica para que pasados 5 minutos aparezca este componente bloqueando la interfaz de nuestro usuario.
Simplemente copia el código del componente, haz alguna prueba y ajusta a tus necesidades. Ahora debemos registrar el componente IdleModal para que esté disponible en Blade.
Para finalizar utiliza la etiqueta html idle-modal en tus archivos blade, principalmente en los layouts si es que tienes más de uno, algo así:
Si toda ha ido bien, pasados los 5 minutos (te recomiendo que lo bajes a unos segundos para hacer pruebas) verás el siguiente resultado.
¡Eso es todo!