Question

有没有办法使用Angularjs管理用户会话？我的意思是::

会话超时 - 系统空闲时。
会话即将到期时发出警报，并提供恢复会话的选项。
在会话过期时尝试发出请求时重定向（或任何其他操作）。

拦截器可以解决这个问题吗？你能提供一个例子吗？

提前致谢。

Answer 1

试试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分钟向服务器发送一个请求。此时间必须小于服务器会话到期时间。

结帐demo。

Answer 2

以下是一些实现：

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

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

Answer 3

我一直在使用ng-idle一段时间以满足以下要求。

我们的要求是用户闲置60分钟。 55分钟后弹出确认框，说你想继续你的会话吗（我已经使用了甜蜜警报）。如果用户单击继续，则重置空闲时间，否则通过调用广播方法强行注销。

当用户在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();

});

角度会话超时和管理

3 个答案: