Estoy trabajando en un proyecto usando angular, quiero cerrar la sesión del usuario cuando el usuario hace clic en el botón Cerrar o en el botón Actualizar. A continuación se muestra el código
document.addEventListener("DOMContentLoaded",function() { document.addEventListener('visibilitychange', function logData() { console.log(document.visibilityState) if (document.visibilityState == "hidden") { alert("hello") navigator.sendBeacon('logout'); } }); })El problema es que cuando el usuario cambia a otra pestaña en el navegador, este código se ejecuta y el usuario cierra la sesión.
Investigué en Google y encontré el evento beforeunlod, pero la mayoría de las respuestas dicen que no funciona en dispositivos móviles.
Para actualizar (o cerrar la pestaña, o cerrar el navegador) podríamos escuchar window:beforeunload para activar el cierre de sesión. Para un botón, sería un simple evento de escucha (click) . La propiedad onbeforeunload de la combinación WindowEventHandlers es el controlador de eventos para procesar los eventos beforeunload. Estos eventos se activan cuando una ventana está a punto de descargar sus recursos. En este punto, el documento aún está visible y el evento aún se puede cancelar.
@HostListener('window:beforeunload') unloadHandler(event) { alert("logging out now...") navigator.sendBeacon('logout'); }Documentos: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#examples