javascript - Angular 会话超时和管理

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

查看演示。

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();
});

下面是 Time Out 的代码，它将在 ---(TimeOut.firstAPiCall +TimeOut.SessionTimeOut) 之后调用

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


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

});