En mi aplicación web Angular, cuando un navegador se actualiza o recarga, el inicio de sesión del usuario se pierde y debe seguir los pasos de inicio de sesión nuevamente. Me gustaría permitir que el estado de inicio de sesión permanezca abierto para el usuario después de que se vuelva a cargar el navegador, pero solo dentro de un breve intervalo, quizás 10 segundos más o menos. Cuando la aplicación web se recarga, verifica si el regreso está dentro de este intervalo de 10 segundos. Para eso, necesito saber cuándo se actualizó/recargó o el último momento en que la aplicación estuvo activa.
¿Cómo determinamos el momento justo antes de que el navegador se vuelva a cargar (o se cierre) o el momento más cercano a eso?
Puede capturar el evento de recarga y almacenar una marca de tiempo en el almacenamiento local, luego verifique y compare cada vez que se inicie su aplicación. Una función simple puede ser:
window.onbeforeunload = ()=>{ localStorage.setItem('last_reload_time',(new Date()).getTime()); } Luego, en su aplicación, verifique last_reload_time y compárelo con la marca de tiempo actual.
Otro evento DOM que puede ayudar es el cambio de visibilidad.
En su forma JS simple, utilicé la respuesta de Metabolic como punto de partida. Sin embargo, la funcionalidad del evento: "onbeforeunload" es un poco complicada como se indica aquí: MDN , y algunos navegadores, por ejemplo, Chromeware, me dan la espalda al evento, no se disparan. Tenga en cuenta que, en la mayoría de los casos, el evento de recarga se activa, pero el depurador no lo detecta y si coloca puntos de interrupción (por ejemplo, en fn: onBeforeUnload() ), ¡no espere que detengan su código en el evento!
Usé este enfoque con rxjs para resolver - en Angular.
import { fromEvent } from 'rxjs'; persistKey: string = 'TIME_BEFORE_UNLOAD'; //// eventually, instead of rxjs: fromEvent(...) //// you can use this: // @HostListener("window:beforeunload", ["$event"]) // unloadHandler(event: Event) { // this.onBeforeUnload(event); // } ngOnInit() { // use this to test and see; // the time stamps should change in console // after each reload click console.log('-- Stored time before unload: ', localStorage.getItem(this.persistKey)); this.subscribeToBrowserEvents(); } private subscribeToBrowserEvents() { fromEvent(window, 'beforeunload') .subscribe(event => this.onBeforeUnload(event)); } private onBeforeUnload(event) { const val: string = new Date().toISOString(); localStorage.setItem(this.persistKey, val); }