Angular Relogin User on Wake Up

In einer Angular-App gibt es eine Möglichkeit, ein Ereignis auszulösen, wenn ein Benutzer den Browser-Tab wieder öffnet. Dies kann mithilfe des Page Visibility API erreicht werden, das vom Browser bereitgestellt wird.

Um auf das Ereignis zu reagieren, wenn der Benutzer den Tab wieder öffnet, kannst du das visibilitychange-Ereignis an das document-Objekt binden. Hier ist ein Beispiel, wie du dies in Angular umsetzen kannst:

import {Component, HostListener} from '@angular/core';
import {AuthService} from './shared/auth/auth.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    private authService: AuthService,
    private router: Router,
  ) {}

  // when user is reopening app, we check if the API session is expired and user nees to login again
  @HostListener('document:visibilitychange', ['$event'])
  visibilitychange() {
    console.log('visibilitychange event');
    if (!document.hidden) {
      console.log('check if user is logged in');
      if (!this.authService.checkTokenValidity()) {
        console.log('user token validity has expired. make logout');
        this.router.navigate(['/logout']);
      }
    }
  }
}

Zusammenfassend wird dieser Code verwendet, um zu überprüfen, ob die API-Sitzung des Benutzers abgelaufen ist, wenn der Benutzer die App erneut öffnet. Wenn das Benutzertoken abgelaufen ist, wird der Benutzer automatisch zur Logout-Seite weitergeleitet. Dadurch wird eine erneute Authentifizierung ermöglicht und der Benutzer aufgefordert, sich erneut anzumelden, um auf geschützte Funktionen der App zugreifen zu können.