Angular2中的AngularJS $ idleProvider和$ keepaliveProvider

Question

在AngularJS 1. *中 ，有兩個非常有用的提供程序： $idleProvider和$keepaliveProvider 。 我使用它們來處理會話超時，並自動注銷先前項目中的用戶。 我們現在正在與Angular2一起開始一個新項目，我想知道是否有計划為這些項目提供類似的支持嗎？ 理想情況下，我們可以擁有一種自動從客戶端注銷用戶的機制。 這是我們在AngularJS中如何完成此操作的源代碼片段-如何使用Angular2完成此操作？

// Configure Idle Session Timeout 
userModule.config([
    'KeepaliveProvider', 'IdleProvider',
    ($keepaliveProvider, $idleProvider) => {
        var str = $('#IdleSessionTimeout').text();
        var idleTimeOut = parseInt(str);
        var interval = 60;
        if (isNaN(idleTimeOut)) {
            idleTimeOut = 20;
            interval = 10;
        } else {
            idleTimeOut *= 60; // Convert minutes -> seconds
        }
        $idleProvider.idle(idleTimeOut);
        // If we ever want to warn user they are about to timeout
        //$idleProvider.timeout(5); 

        $keepaliveProvider.interval(interval);
    }
]);

userModule.run(($rootScope) => {
    $rootScope.$on('IdleTimeout', () => {
        // On timeout, end the user session by redirecting to logout
        var url = window.location.href;
        url = url.replace(/\/\#.*$/, "/Account/Logout");

        window.location.href = url;
    });
});

// Activate Timeout Monitoring
userModule.run(['Idle', ($idle) => {
    $idle.watch();
}]);

請幫忙...

Answer 1

您可以創建一個單例服務，該服務具有一個功能，該功能將在某些時間后執行示例代碼來警告/注銷用戶。 比起超時，您可以更改url或銷毀某些其他依賴項等。

另外，您還可以獲取當前應用程序的NgZone，並訂閱onTurnDone，如果調用了它，則可能是用戶處於活動狀態，因此您可以重置計時器（您不必在完成每個區域翻轉后重置它，但如果有動作，則每3分鍾重置一次） 。 這是我目前唯一想到的解決方案：）

例：

import {Injectable} from "angular2/core";
@Injectable()
export class idleService {
    timeout:number;
    warnTime:number;
    timer:any;
    timestamp: any;
    consturctor(public _ngZone:NgZone) {
        _ngZone.onTurnDone
                .subscribe(() => {
                    if(new Date() - this.timestamp > 30000) // Do this every X minutes you will not "spam" clear -> init all the time
                    clearTimeout(this.timer);
                    this.init();
                });
    }
    init() {
        this.timestamp = new Date();
        this.initWatcher(()=> {
            alert("You will be logged out in" + this.warnTime);
            this.initWatcher(() => {
                this.LogoutFunction()
            }, this.warnTime)
        }, this.timeout);
    }
    initWatcher(action, timeout) {
        this.timer = setTimeout(() => {
            action() //warn/disconnect user}, timeout);
        }, timeout)
    }
}

基本上onTurnDone類似於Angular 1中的“范圍更改”，但我認為我們不應濫用它。 我試圖實現這樣的scrollglue指令，因為我找不到其他方法來監聽范圍的變化

Answer 2

在我看來，這實際上是一個誤解，因為AngularJS實際上不是Angular團隊提供的$idleProvider和$keepaliveProvider 。 這是由“ Hacked By Chinese”創建的，他已經編寫（並維護了）針對Angular2的兩個端口：

• 以前稱為$idleProvider ：
  • https://github.com/HackedByChinese/ng2-idle
• 以前稱為$keepaliveProvider ：
  • https://github.com/HackedByChinese/ng2-idle-keepalive