在前端超时后为用户注销实现一个计时器
Implement a timer for user logout after timeout in the frontend
我想知道在前端实现定时器的最佳方式是什么。
想法是在 13 分钟不活动(= 未向后端发出请求)后通知用户他将在 2 分钟后注销。
我的第一次尝试是使用每秒执行一次的 Timer
(我正在使用 Flutter web 执行此操作,但它应该没有什么区别)并从 15 分钟开始倒计时。
然后我们在内部对此进行了测试,并注意到如果用户长时间切换到不同的选项卡或者如果计算机进入待机状态导致计时器停止,浏览器会以某种方式停止 JavaScript 执行。
后台15分钟后会话超时,这只是为了让用户体验更好。
如何正确实施?
简而言之,我认为只使用前端是不可能的
如您所见,javascript代码会在切换标签页或关闭标签页时停止,计算机处于待机状态。这样使用超时之类的东西就不好了。
我以前用过一个想法,但还没有实现它,因为我转向了使用sessionStorage的更简单的想法。但是您可以看到并以某种方式成功:发出最后一个请求时,创建了一个过期时间为 13 分钟的 cookie。如果发出下一个请求,请清除旧 cookie 并在 13 分钟内添加一个新 cookie。如果请求在 13 分钟内没有发出,当 cookie 过期时,触发一个事件通知用户。对于监听 cookie 变化,我认为有很多解决方案。不过对我来说,这个idea不太好所以就给忘了。
如果你可以使用 nodejs 后端,你可以尝试使用服务器发送事件 - SSE。这将创建 one-way 发送数据。因此,您可以流式传输一大块数据。前端将监听该流并决定是否通知用户。
我想知道在前端实现定时器的最佳方式是什么。
想法是在 13 分钟不活动(= 未向后端发出请求)后通知用户他将在 2 分钟后注销。
我的第一次尝试是使用每秒执行一次的 Timer
(我正在使用 Flutter web 执行此操作,但它应该没有什么区别)并从 15 分钟开始倒计时。
然后我们在内部对此进行了测试,并注意到如果用户长时间切换到不同的选项卡或者如果计算机进入待机状态导致计时器停止,浏览器会以某种方式停止 JavaScript 执行。
后台15分钟后会话超时,这只是为了让用户体验更好。
如何正确实施?
简而言之,我认为只使用前端是不可能的
如您所见,javascript代码会在切换标签页或关闭标签页时停止,计算机处于待机状态。这样使用超时之类的东西就不好了。
我以前用过一个想法,但还没有实现它,因为我转向了使用sessionStorage的更简单的想法。但是您可以看到并以某种方式成功:发出最后一个请求时,创建了一个过期时间为 13 分钟的 cookie。如果发出下一个请求,请清除旧 cookie 并在 13 分钟内添加一个新 cookie。如果请求在 13 分钟内没有发出,当 cookie 过期时,触发一个事件通知用户。对于监听 cookie 变化,我认为有很多解决方案。不过对我来说,这个idea不太好所以就给忘了。
如果你可以使用 nodejs 后端,你可以尝试使用服务器发送事件 - SSE。这将创建 one-way 发送数据。因此,您可以流式传输一大块数据。前端将监听该流并决定是否通知用户。