Inaktivität Abmeldung in Aurelia App

Question

tl; dr, mit Aurelia, wie kann ich eine Funktion aufrufen, die innerhalb eines View-Modells von außerhalb des View-Modells ist?

Ich muss eine clientseitige Abmeldung für einen Benutzer ausführen, der eine Aktion (Routenänderung, Anforderung an den Server usw.) für eine bestimmte Zeit nicht ausgeführt hat. Nachdem ich diese GitHub issue gelesen habe, habe ich eine Inaktivitätsabmeldungsansicht und ein Ansichtsmodell erstellt und diese in meine app.html integriert. In meiner attached() -Funktion starte ich meinen Timer und melde den Benutzer ab, wenn die Zeit abläuft.

Das alles funktioniert super, aber ich habe ein Problem, das mich wie all das ist ein riesiges Kaninchen-Loch fühlt. Wie kann ich meine resetInactivityTimer() - Funktion außerhalb des View-Modells aufrufen? Ist es möglich, eine Funktion in einer Klasse öffentlich zu aktivieren? Wie, wenn eine Anfrage an den Server ausgeführt wird, möchte ich die resetInactivityTimer() -Funktion von meiner Dienstklasse

Inaktivität-logout.ts

import {Aurelia} from 'aurelia-framework'; 
 
import {Router} from 'aurelia-router'; 
 
import {inject} from 'aurelia-dependency-injection'; 
 

 
@inject(Aurelia, Router) 
 
export class InactivityLogout { 
 
    inactivityWarningDuration: number; // how long should the warning be up 
 
    initialInactivityWarningDuration: number; // how long should the warning be up 
 
    inactivityDuration: number; // how long before we warn them 
 
    inactivityIntervalHandle: any; 
 

 
    constructor(aurelia, router) { 
 
     this.aurelia = aurelia; 
 
     this.router = router; 
 
     this.initialInactivityWarningDuration = 5; 
 
     this.inactivityWarningDuration = this.initialInactivityWarningDuration; 
 
     this.inactivityDuration = 5; 
 
    } 
 

 
    attached() { 
 
     this.queueInactivityTimer(); 
 
    } 
 

 
    resetInactivityTimer(){ 
 
     $("#LogoutWarningPopup").modal("hide"); 
 

 
     this.inactivityWarningDuration = this.initialInactivityWarningDuration; 
 
     clearInterval(this.warningInterval); 
 
     this.queueInactivityTimer(); 
 
    } 
 

 
    queueInactivityTimer(){ 
 
     clearTimeout(this.inactivityIntervalHandle); 
 

 
     this.inactivityIntervalHandle = setTimeout(() => { 
 
      this.displayWarning(); 
 
     }, 1000 * this.inactivityDuration); 
 
    } 
 

 
    displayWarning(){ 
 
     $("#LogoutWarningPopup").modal({ backdrop: 'static', keyboard: false }); 
 
     this.warningInterval = setInterval(()=>{ 
 
       this.inactivityWarningDuration--; 
 
       if(this.inactivityWarningDuration <= 0){ 
 
        clearInterval(this.warningInterval); 
 
        this.logout(); 
 
       } 
 
      }, 1000); //start counting down the timer 
 
    } 
 

 
    logout(){ 
 
     $("#LogoutWarningPopup").modal("hide"); 
 
     console.log("due to inactivity, you've been logged out.") 
 
     this.aurelia.setRoot('views/login'); 
 
    } 
 
}

App nennen. html

<require from='./inactivity-logout.js'></require> 
 
    <inactivity-logout></inactivity-logout>

search-service.ts

performSearch(searchText: String) { 
 

 
     /* 
 
     * Stuff here to reset inactivity timer 
 
     */ 
 

 
     return this.httpClient.put("/api/Search", searchText) 
 
      .then(response => { 
 
       return response; 
 
      }); 
 
    }

Answer 1

Die gute Art und Weise für globale Ereignisse ist PubSub Muster mit aurelia-event-aggregator lib zu verwenden.

import {Aurelia} from 'aurelia-framework'; 
 
import {Router} from 'aurelia-router'; 
 
import {inject} from 'aurelia-dependency-injection'; 
 
import {EventAggregator} from 'aurelia-event-aggregator'; 
 

 
@inject(Aurelia, Router, EventAggregator) 
 
export class InactivityLogout { 
 
    inactivityWarningDuration: number; // how long should the warning be up 
 
    initialInactivityWarningDuration: number; // how long should the warning be up 
 
    inactivityDuration: number; // how long before we warn them 
 
    inactivityIntervalHandle: any; 
 

 
    constructor(aurelia, router, ea) { 
 
     this.aurelia = aurelia; 
 
     this.router = router; 
 
     this.initialInactivityWarningDuration = 5; 
 
     this.inactivityWarningDuration = this.initialInactivityWarningDuration; 
 
     this.inactivityDuration = 5; 
 
     this.ea = ea; 
 
     
 
     // subscribe 
 
     this.sub = this.ea.subscribe(RefreshInactivity, msg => { 
 
      console.log(msg.value); 
 
     }); 
 

 
     // to unsubscribe somewhere 
 
     // this.sub.dispose() 
 
    } 
 
... 
 

 
}

export class RefreshInactivity { 
 
    
 
    constructor(value) { 
 
    this.value = value; 
 
    } 
 
    
 
}

Versand Ereignis irgendwo in App

this.ea.publish(new RefreshInactivity('some value'));