Estoy creando un proyecto usando angular, en mi aplicación quiero cerrar la sesión del usuario cuando el usuario cierra el navegador, pero el problema es que el usuario también cierra la sesión cuando se actualiza la página. Quiero detener esto en la actualización de la página.
@HostListener('window:beforeunload', ['$event']) onBeforeUnload(): void { navigator.sendBeacon('logout'); }Probé mucho en google pero no encontré ninguna solución para lograr esto. Si no es posible en angular, puede guiarme cómo podemos lograrlo.
Almacenaría una marca de tiempo en localStroage para mantener el estado de inicio de sesión del usuario (idealmente, esto podría refactorizarse en su servicio de autenticación y usar AuthGuards.
Cuando el usuario inicia sesión, publicamos un token en el almacenamiento. Después de la actualización, o cualquier otro tipo de carga, intentamos leer el token del almacenamiento. También con beforeunload actualizamos el token por última vez antes de que se cierre la ventana.
Al abrir la página, verificamos si tenemos un token almacenado y verificamos que no tenga más de 5 segundos. Si el token es más nuevo que 5 segundos, el usuario inicia sesión.
Esto significa que la actualización que ocurre más rápido que 5 segundos, el usuario permanece conectado. Y asumimos que cerrar el navegador lleva más de 5 segundos. Realmente no podemos usar window:beforeunload únicamente porque, como otros señalaron, para el navegador, es lo mismo cuando se actualiza, cuando se cierra la pestaña o se cierra el navegador.
Este ejemplo simplificado es un caso común para mantener activa la sesión del usuario frontend con tokens almacenados que, de una forma u otra, verifican la validez de la sesión (en este caso, se basa en el tiempo). Aunque, en realidad, el manejo de los tokens debería ser más seguro y, por lo general, el backend mantendrá viva la sesión y el frontend solo leerá el valor del token, validará e iniciará sesión como usuario y actualizará el token si es necesario.
@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { isLoggedIn = false; token: string; now = new Date(); @HostListener('window:beforeunload', ['$event']) onBeforeUnload(): void { if (this.isLoggedIn) { localStorage.setItem('myToken', this.now.toISOString()); console.log('beforeunload:', localStorage.getItem('myToken')); } navigator.sendBeacon('logout'); } constructor() {} ngOnInit() { this.checkIsLoggedIn(); } // user will remain logged in for 5 seconds checkIsLoggedIn() { this.token = localStorage.getItem('myToken'); if (this.token) { const currentTime = this.now.getTime() - 5 * 1000; const previousTime = new Date(this.token).getTime(); if (currentTime < previousTime) { console.log('prev: ', previousTime); console.log('curr: ', currentTime); this.isLoggedIn = true; } } } onLogin() { localStorage.setItem('myToken', this.now.toISOString()); this.token = localStorage.getItem('myToken'); if (this.token) { this.isLoggedIn = true; } console.log(this.token); } }Ejemplo de trabajo: https://stackblitz.com/edit/angular-ivy-ff9jns?file=src%2Fapp%2Fapp.component.ts
Puedes probar algo como esto.
@HostListener('window:beforeunload', ['$event']) onBeforeUnload(): void { if ((window.event.clientY < 0)) { // your logout logic } };Puede usar el almacenamiento local para guardar el token de autenticación y recuperarlo después de actualizar el navegador. O puede usar la administración de estado de NgRx para eso.