2013-05-22 12 views
35

Esiste un modo per gestire la sessione utente utilizzando Angularjs ?, voglio dire :: timeoutangolare timeout e la gestione delle sessioni

  • Sessione - quando il sistema è inattivo.
  • Avvisa quando la sessione sta per scadere con l'opzione di riprendere la sessione.
  • Reindirizza (o qualsiasi altra azione) quando si tenta di effettuare una richiesta se la sessione è scaduta.

Gli Interceptor potrebbero essere una buona opzione per risolvere questo problema? Puoi fornire un esempio?

Grazie in anticipo.

risposta

49

Prova ng-idle. È un componente semplice in cui è possibile impostare il timeout e il tempo di avviso prima che venga raggiunto il timeout. Quindi è possibile interrogare il server per il logout dell'utente o qualcosa di simile.

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

Nella configurazione di cui sopra, quando l'utente è inattivo per 900 (non si muove il mouse, premere un tasto o pulsante, ecc), è visualizzato avvisi. Attenderà quindi 60 secondi e disconnetterà l'utente (invia una richiesta a un server che probabilmente distrugge la sessione del server).

Per assicurarsi che la sessione del server non scada (anche se tutto ciò che l'utente sta facendo è spostare il mouse) il servizio Keepalive invierà una richiesta al server ogni 10 minuti. Questa volta deve essere inferiore alla scadenza della sessione del server.

Acquista il demo.

+2

+1 per dare una buona spiegazione e usare la sintassi corrente - modificata per aggiungere una chiamata a 'In attesa.guarda() 'nella funzione' run() 'altrimenti il ​​timer non si avvia e gli eventi di inattività non si attivano. – Boris

+0

@ Boris, grazie. La tua modifica è stata rifiutata, quindi l'ho aggiunta io stesso. – fracz

+0

grazie per aver aggiunto la modifica. Qualche idea sul perché è stata respinta? sicuramente non ha funzionato per me senza 'watch()' e anche altri sembrano avere questo problema. – Boris

1

Ho usato ng-idle per un po 'di tempo ora per requisiti inferiori.

Il nostro requisito era quando l'utente è inattivo per 60 minuti. Dopo 55 minuti, mostrare il pop-up con la casella di conferma che dice di voler continuare la sessione o meno (ho usato un avviso dolce). Se l'utente fa clic su Continua, quindi reimposta l'ora di inattività, altrimenti effettua la disconnessione forzata chiamando il metodo di trasmissione.

configurazione deve essere fatto in app.js quando gli utenti accedono-in all'interno app.config come qui di seguito

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. 

Di seguito è il codice per mostrare 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 

}); 

Di seguito è riportato il codice per la gestione degli eventi inattivi:

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

Di seguito è riportato il codice per Time Out verrà chiamato dopo - - (TimeOut.firstAPiCall + TimeOut.SessionTimeOut)

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


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

});