Angular会话超时和管理[重复]

Posted 2023-02-24

【中文标题】Angular会话超时和管理[重复]

【英文标题】：Angular session timeout and management [duplicate]

【发布时间】：2013-05-17 19:29:10

【问题描述】：

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

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

拦截器是解决这个问题的一个好选择吗？可以举个例子吗？

【问题讨论】：

@georgeawg 这个问题比引用的要旧，必须重复

【参考方案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。

【讨论】：

+1 用于提供良好的解释并使用当前语法 - 编辑以在 run() 函数中添加对 Idle.watch() 的调用，否则计时器将不会启动并且空闲事件不会火。

@Boris，谢谢。您的修改已被拒绝，所以我自己添加了。

感谢您添加编辑。知道为什么它被拒绝了吗？如果没有watch()，它肯定对我不起作用，其他人似乎也遇到了这个问题。

决定是接受还是拒绝编辑的用户通常不熟悉相关的技术/问题。因此，他们经常以“试图回答”为由拒绝修改源代码中的某些内容的编辑。在需要改进答案/问题的情况下，最好为 OP 留下评论。

【参考方案2】：

这里有一些实现：

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

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

【讨论】：

请不要只发布链接作为答案。

【参考方案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();

);