Angular Session-Timeout und Management

Question

Gibt es eine Möglichkeit Benutzersitzung mit AngularJS zu verwalten ?, ich meine ::

• Session-Timeout - wenn das System inaktiv ist.
• Warnt, wenn die Sitzung kurz vor dem Ablauf steht, mit der Option zum Fortsetzen der Sitzung.
• Redirect (oder eine andere Aktion) beim Versuch, eine Anfrage zu stellen, wenn die Sitzung abgelaufen ist.

Könnte Interzeptoren eine gute Option sein, um dieses Problem zu lösen? Können Sie ein Beispiel geben?

Vielen Dank im Voraus.

Answer 1

ng-idle Versuchen. Es ist eine einfache Komponente, wo Sie die Timeout- und Warnzeit vor dem Timeout einstellen können. Dann können Sie Server für Benutzerabmeldung oder etwas Ähnliches abfragen.

myApp.config(function(IdleProvider, KeepaliveProvider) { 
    IdleProvider.idle(900); // 15 min 
    IdleProvider.timeout(60); 
    KeepaliveProvider.interval(600); // heartbeat every 10 min 
    KeepaliveProvider.http('/api/heartbeat'); // URL that makes sure session is alive 
}); 

myApp.run(function($rootScope, Idle) { 
    Idle.watch(); 
    $rootScope.$on('IdleStart', function() { /* Display modal warning or sth */ }); 
    $rootScope.$on('IdleTimeout', function() { /* Logout user */ }); 
}); 

In der obigen Konfiguration wird, wenn der Benutzer für 900s im Leerlauf ist (nicht Maus, Drücken bewegt beliebige Taste oder Knopf etc.) Warnung angezeigt wird. Es wird dann 60 Sekunden warten und Benutzer abmelden (Anfrage an einen Server senden, der möglicherweise die Serversitzung zerstört).

Um sicherzustellen, dass die Serversitzung nicht abläuft (selbst wenn der Benutzer gerade die Maus bewegt) sendet der Dienst Keepalive alle 10 Minuten eine Anfrage an den Server. Diese Zeit hat weniger als die Ablaufzeit der Server-Sitzung.

Kauf die demo.

Answer 2

Hier sind einige Implementierungen:

https://github.com/witoldsz/angular-http-auth

https://github.com/angular-app/angular-app/tree/master/client/src/common/security

Answer 3

Ich habe ng-Leerlauf seit einiger Zeit jetzt für unten Anforderung verwendet.

Unsere Anforderung war, wenn der Benutzer für 60 Minuten im Leerlauf ist. Nach 55 Minuten erscheint das Popup mit der Bestätigungsbox, die besagt, dass du mit deiner Sitzung fortfahren willst oder nicht (ich habe süße Warnung verwendet). Wenn der Benutzer auf weiter klicken, dann setzen Sie die Leerlaufzeit zurück, andernfalls melden Sie sich durch Aufruf der Broadcast-Methode ab.

Konfiguration muss in app.js getan werden, wenn die Benutzer innerhalb app.config Log-in wie unten

app.config(['KeepaliveProvider', 'IdleProvider', function (KeepaliveProvider, IdleProvider) { 
IdleProvider.idle(TimeOut.firstAPiCall);--It will call Idle On method 
IdleProvider.timeout(TimeOut.SessionTimeOut);--It will be called when the total time is (TimeOut.firstAPiCall +TimeOut.SessionTimeOut) 
KeepaliveProvider.interval(TimeOut.interval);}]) --It will be called like a heart beat for mentioned timeout until the idle start has not occured. 

Unten ist der Code für die Ansicht Pop-up

$scope.$on('IdleStart', function() { 
    $scope.$broadcast('SessionIdleUpdate', 'IdleStart', TimeOut.FirstApicall); 
    $rootScope.idleTimerSession = setTimeout(function() { 
     console.log("pop up appeared on : " + new Date()) 
     $scope.timedout = SweetAlert.swal({ 
      title: "Alert", 
      text: "Your session is about to expire in 5 minutes, Do you want to continue?", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DDDDD", 
      confirmButtonText: "CONTINUE", 
      cancelButtonText: "No" 
     }, function (isConfirm) { 
      if (isConfirm) { 
       clearTimeout(idleTimer); 
      } 
      else { 
       console.log("pop up closed from confirm on : " + new Date()) 
       $scope.$broadcast('SessionTimeOutLogOut', null); 
       Idle.unwatch(); 
       $scope.started = false; 
      } 
     }); 

     //This check is to handle idle pop up if it appears and user doesnt perform any action it will simply logout. 
     var idleTimer = setTimeout(function() { 

      swal.close();    
      $scope.$broadcast('SessionTimeOutLogOut', null); 
      Idle.unwatch(); 
      $scope.timedout = null; 
     }, (TimeOut.sessionTimeOut) * 1000); 
    }, (TimeOut.idleTimeOut - TimeOut.idleCheckDuration) * 1000);-- Time out is added to hold the pop up for that much duration . Because once the idle start is occured you wont be able to call the API 

}); 

Nachfolgend finden Der Code für die Behandlung von Leerlauf Ende Ereignis:

$scope.$on('IdleEnd', function() { 
     $scope.$broadcast('SessionIdleUpdate', 'IdleEnd', 0));  
    clearTimeout($rootScope.idleTimerSession); 
    closeModals(); 
}); 

Unten ist der Code für Time Out wird es nach aufgerufen werden - - (TimeOut.firstAPiCall + TimeOut.SessionTimeOut)

$scope.$on('IdleTimeout', function (forceLogout) { 


     swal.close(); 
     $scope.$broadcast('SessionTimeOutLogOut', null); 
     Idle.unwatch(); 

});