Dépassement et gestion de la session angulaire

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

  • Délai de session – lorsque le système est inactif.
  • Alertes lorsque la session est proche d'expirer avec l'option de reprendre la session.
  • Rediriger (ou toute autre action) en essayant de faire une 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.

Essayez ng-idle . C'est un composant simple où vous pouvez régler le délai d'attente et le temps d'avertissement avant que le délai d'attente ne soit atteint. Ensuite, vous pouvez interroger le serveur pour le 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 pour 900s (ne bouge pas la souris, appuyez sur n'importe quelle touche ou bouton, etc.), un avertissement s'affiche. Il attendra alors les années 60 et déconnecte l'utilisateur (envoie une demande à un serveur qui détruit peut-être 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 enverra une requête au serveur toutes les 10 minutes. Cette fois, il faut moins d'heure d'expiration de la session du serveur.

Caisse la démo .

J'ai utilisé ng-idle depuis un certain temps maintenant pour les besoins ci-dessous.

Notre exigence était lorsque l'utilisateur était inactif pendant 60 minutes. Après 55 minutes, affichez la boîte de confirmation avec la boîte de confirmation en disant vouloir continuer votre session ou non (j'ai utilisé une alerte douce). Si l'utilisateur clique sur continuer, réinitialisez le temps d'inactivité, connectez-vous avec force en appelant la méthode de diffusion.

La configuration doit être effectuée dans app.js lorsque les utilisateurs se connectent à l'intérieur de 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. 

Voici le code pour afficher le 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 }); 

Voici le code pour la gestion de l'événement final inactif:

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

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

  $scope.$on('IdleTimeout', function (forceLogout) { swal.close(); $scope.$broadcast('SessionTimeOutLogOut', null); Idle.unwatch(); });