web-dev-qa-db-fra.com

Angular Expiration et gestion de la session

Y at-il un moyen de gérer la session utilisateur en utilisant Angularjs ?, je veux dire:

  • Session timeout - lorsque le système est inactif.
  • Alertes lorsque la session arrive à expiration avec l'option de reprendre la session.
  • Rediriger (ou toute autre action) lors d'une tentative de demande si la session a expiré.

Les intercepteurs pourraient-ils être une bonne option pour résoudre ce problème? Pouvez vous donner un exemple?

Merci d'avance.

javascriptangularjssession-timeout
43
Osy

Essayez ng-idle . C'est un composant simple où vous pouvez définir le délai d'expiration et le délai d'avertissement avant que le délai ne soit atteint. Ensuite, vous pouvez interroger le serveur pour la déconnexion de l'utilisateur ou quelque chose de similaire.

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 */ });
});

Dans la configuration ci-dessus, lorsque l'utilisateur est inactif depuis 900 (ne déplace pas la souris, n'appuie sur aucune touche, aucun bouton, etc.), un avertissement est affiché. Il attendra ensuite 60s et déconnectera l'utilisateur (envoi de la requête à un serveur pouvant détruire la session du serveur).

Afin de s'assurer que la session du serveur n'expire pas (même si tout ce que l'utilisateur fait est de déplacer la souris), le service Keepalive envoie une demande au serveur toutes les 10 minutes. Ce délai doit être inférieur au délai d'expiration de la session du serveur.

Commander le démo .

55
fracz

Voici quelques implémentations:

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

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

4
SergeL

J'utilise ng-idle depuis un certain temps pour répondre aux exigences ci-dessous.

Notre exigence était lorsque l'utilisateur est inactif pendant 60 minutes. Après 55 minutes, affichez la boîte de confirmation avec le message voulu, souhaitez-vous poursuivre votre session ou non (j'ai utilisé l'alerte douce). Si l'utilisateur clique sur Continuer, réinitialise le temps d'inactivité, sinon ferme la session de force en appelant la méthode broadcast.

La configuration doit être effectuée dans app.js lorsque les utilisateurs se connectent à app.config comme ci-dessous.

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.

Ci-dessous le code pour afficher les fenêtres 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 

});

Vous trouverez ci-dessous le code permettant de gérer les événements de fin d'inactivité:

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

Ci-dessous le code pour Time Out, il sera appelé après --- (TimeOut.firstAPiCall + TimeOut.SessionTimeOut)

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


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

});
1
Rohan