AngularJS $idleProvider and $keepaliveProvider in Angular2

Question

In AngularJS 1.* there are two providers that arevery useful, $idleProvider and $keepaliveProvider. I used these to handle session timeouts and automatically logout user's in previous project's. We are starting a new project now from the group up with Angular2 and I want to know if there is a plan for having similar support to these? Ideally we could have a mechanism that automatically logs out the user from the client. Here is the snippet of the source from how we accomplished this in AngularJS -- how can this be done with 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();
}]);

Please help...

score 3 · Answer 1 · answered Feb 18 '16 at 14:26

You can create a singleton service which will have a function which will do something like the example code to warn/logout the user after a certain time. Than, than on timeout you can change the url or destroy some other dependency etc..

Also you can get NgZone of your current application, and subscribe to onTurnDone and if its called probably the user is active so you can reset the timer (you dont have to reset it on every zone turn done but every 3 minutes if there is action). This is the only solution that I have on my mind now :)

Example:

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

Basically onTurnDone is similar to "on scope changes" in Angular 1 but I think we should not abuse it. I tried to implement a scrollglue directive like this since I cant find any other way how to listen for changes in the scope

This is actually incorrect as it does not take user activity into account whatsoever. This seems to be the correct solution :: https://github.com/HackedByChinese/ng2-idle — David Pine, Feb 22 '16 at 17:12

score 1 · Accepted Answer · answered May 10 '16 at 16:07

This was actually a misconception on my part as the AngularJS $idleProvider and $keepaliveProvider are not actually by the Angular team. This is was created by "Hacked By Chinese" and he has written (and maintained) the two ports targeting Angular2:

Previously known as $idleProvider:
- https://github.com/HackedByChinese/ng2-idle
Previously known as $keepaliveProvider:
- https://github.com/HackedByChinese/ng2-idle-keepalive

AngularJS $idleProvider and $keepaliveProvider in Angular2

2 Answers2

Linked