web-dev-qa-db-ja.com

Angularセッションのタイムアウトと管理

Angularjsを使用してユーザーセッションを管理する方法はありますか？：

  • セッションタイムアウト-システムがアイドル状態のとき。
  • セッションを再開するオプションを使用して、セッションの有効期限が切れそうになると警告します。
  • セッションの有効期限が切れている場合にリクエストを行おうとすると、リダイレクト（またはその他のアクション）します。

インターセプターは、この問題を解決するための良い選択肢の1つでしょうか？例を挙げていただけますか？

前もって感謝します。

javascriptangularjssession-timeout
43
Osy

ng-idle を試してください。これは、タイムアウトに達する前にタイムアウトと警告時間を設定できる単純なコンポーネントです。次に、ユーザーのログアウトまたは同様のことをサーバーに照会できます。

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

上記の構成で、ユーザーが900秒間アイドル状態（マウスを動かさず、キーやボタンを押さないなど）の場合、警告が表示されます。その後、60秒間待機してユーザーをログアウトします（サーバーセッションを破壊する可能性のあるサーバーにリクエストを送信します）。

サーバーのセッションが期限切れにならないようにするために（ユーザーがしているすべてがマウスを動かしている場合でも）、Keepaliveサービスは10分ごとにサーバーにリクエストを送信します。この時間は、サーバーセッションの有効期限よりも短くする必要があります。

デモ をチェックアウトします。

55
fracz

実装は次のとおりです。

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

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

4
SergeL

以下の要件のために、ng-idleをしばらく使用しています。

私たちの要件は、ユーザーが60分間アイドル状態だったときです。 55分後、セッションを続行するかどうかを示す確認ボックスがポップアップ表示されます（甘いアラートを使用しました）。ユーザーが[続行]をクリックした場合、アイドル時間をリセットするか、broadcastメソッドを呼び出して強制的にログアウトします。

以下のようにapp.config内でユーザーがログインする場合、app.jsで設定を行う必要があります

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.

以下はポップアップを表示するためのコードです

   $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 

});

以下は、アイドル終了イベントを処理するためのコードです。

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

以下は---（TimeOut.firstAPiCall + TimeOut.SessionTimeOut）の後に呼び出されるタイムアウトのコードです。

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


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

});
1
Rohan