SPA会话到期时重新登录

Question

我正在使用AngularJS构建单页应用程序。我正在考虑两种方法来处理服务器端会话到期的长时间空闲时间。

方法A：在AJAX，Relogin，Resend期间检测

• 用户最初加载应用并登录
• 用户使用应用程序一段时间然后空闲，让应用程序打开
• 服务器端会话到期
• 用户继续使用该应用
• 在尝试保存数据时，角度http拦截器检测到401状态代码响应，显示模式对话框中的登录，如果用户正确进行身份验证（从而启动新的服务器端会话），则将更改重新提交给服务器

我对此的看法是技术上可行，但是UX可能有点刺耳，实现可能会变得复杂，因为可能有许多类型的AJAX请求触发401响应（单击链接，编辑字段，等）

方法B：跟踪客户端的空闲时间并提示重新登录

• 用户最初加载应用并登录
• 用户使用应用程序一段时间然后空闲，让应用程序打开
• 在每个服务器响应上，浏览器代码启动空闲计时器
• 当服务器交互时间超过会话有效期时，浏览器会抢先显示模式对话框中的登录
• 用户回来，看到对话框，然后可以在继续使用该应用程序之前登录。

我认为这种方法可能是更好的用户体验，并且由于没有重试逻辑，因此也更容易实现。

---

这些中的任何一个都会让你感到坚强吗？有更好的方法吗？

Answer 1

他们每个人都有他们的利弊，但我使用混合方法来获得两种方法的好处，也放弃了缺点。我的方法的核心是A，即在服务器端具有过滤器以更新每个请求的会话信息（到期，有效性），但是客户端还基于用户与UI的交互定期发送保持活动请求。每个keep alive都会从服务器返回一个响应，指示会话仍然有效（不会通过从其他选项卡或SSO注销而失效）。你需要记住的事情：

1. 由于用户考虑阅读文本并滚动和点击活动，因此方法1本身是不够的。因此，如果您将客户端功能挂钩到未向服务器发送Ajax调用的单击（例如显示弹出窗口），则即使用户仍然单击该按钮，用户也将被注销。

2. 方法2本身也是不够的，因为您只依赖当前用户选项卡上的用户活动（除非您使用浏览器存储）而不依赖于服务器数据。提出的问题是：a）用户在另一个选项卡中注销但仍然在另一个选项卡中登录b）在许多安全案例中，您需要使用单点登录将应用程序嵌入到第三方应用程序中，然后实际上您需要只要用户在另一个应用程序中处于活动状态，就会签名。

Answer 2

绝对接近A. 但更优雅的方法是使用$httpProvider.interceptors。

在Angular App启动后，立即配置你的应用程序：

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(['$q', function ($q) {
        return {
            'responseError': function (rejection) {
                if (rejection.status === 440) {//I prefer to use 440 to indicate the user is timeout.
                    //window.location.href = "/login"; redirect to your login page
                }
                return $q.reject(rejection);
            }
        };
    }]);
}]);

通过这样做，可以将重定向方法注入 $ http 的方法。如果服务器发回 440 代码，则会首先执行此方法。