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

app.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 lib。

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'));

Aurelia app中的不活动注销

1 个答案: