typescript - Hendelse for lukking av nettleserfane i Angular 6 fungerer bare i debug-modus

Jeg prøver å fange nettleserhendelser som lukking av fane og oppdatering i min Angular 6-applikasjon. Det fungerer fint i debug-modus, men det fungerer ikke hvis jeg lukker debug-modus og kjører applikasjonen. Nedenfor er koden.

registerDOMEvents() {
  window.addEventListener('unload', () => {
    if (this.validNavigation === 0) {
      this.endSession();
    }
  });
  document.addEventListener('keydown', (e) => {
    const key = e.which || e.keyCode;
    if (key === 116) {
      this.validNavigation = 1;
    }
  });
}
endSession() {
  this.logout();
  localStorage.clear();
}
ngOnInit() {
  this.registerDOMEvents();
}

Hva kan være problemet med dette problemet?

Svar #1

Du må bruke beforeunload i stedet for unload. beforeunload er mer pålitelig og utløses når dokumentet og dets ressurser er i ferd med å bli lastet ut, mens unload utløses når siden allerede lastes ut.

Din endSession() må være synkron, siden nettleseren ikke vil vente når noen tilbakeringinger blir kalt. Så vidt jeg vet gir ikke Angulars HTTP-tjeneste synkrone HTTP-kall, men du kan gjøre det selv med XMLHttpRequest:

window.addEventListener("beforeunload", function (event) {
  var client = new XMLHttpRequest();
  client.open("POST", "http://url/to/endsession", false); // third parameter indicates sync xhr
  client.setRequestHeader("Content-Type", "application/json");
  client.send('{userId: "42"}');
  console.log('done!!!'); // outputs when a response is received 
});

Se også på denne artikkelen. Du kan sannsynligvis bruke navigator.sendBeacon hvis nettleseren til klientene dine støtter den funksjonen.

Svar #2

@HostListener('window:unload')
async ngOnDestroy() {

  await this.oneService.handleSignOut();

}

Dette vil bare inntreffe ved lukking av vindu/fane.

Relaterte artikler