Aurelia不活躍註銷應用程序

Question

tl; dr，與Aurelia，我如何從視圖模型的外部調用視圖模型內部的函數？

我需要對未執行操作（路由更改，對服務器的請求等）一段時間的用戶執行客戶端註銷。 看完這個GitHub issue後，我創建了一個不活動註銷視圖和視圖模型，並將其合併到我的app.html和我的附件（）函數中，啓動我的計時器並在時間到期時將用戶註銷。

這一切都很好，但我遇到了一個問題，讓我覺得所有這些都是一個巨大的兔子洞。如何從視圖模型的外部調用我的resetInactivityTimer（）函數，是否可以使一個類中的某個函數公開調用？當執行到服務器的請求一樣，我想從我的服務類調用resetInactivityTimer（）函數

非活動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'); 
 
    } 
 
}

應用。 html

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

搜索service.ts

performSearch(searchText: String) { 
 

 
     /* 
 
     * Stuff here to reset inactivity timer 
 
     */ 
 

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

Answer 1

的好方法全局事件是使用PubSub的模式與aurelia-event-aggregator庫。

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; 
 
    } 
 
    
 
}

調度事件在應用

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