当状态在未激活时更改时,Firefox无法正确更新页面

Question

我们有一个角度应用程序(SPA),它维护客户端用户会话(会话超时,不活动时间等).会话用于强制用户在会话因某种原因到期时重新登录.

会话的到期由专用服务控制,该服务在会话终止,锁定或以其他方式更改状态时在$ rootScope上广播事件.

我们将侦听器添加到那些会将路由更改为相关页面(登录页面,解锁页面等)的会话状态更改事件.我们使用angular-ui-router进行路由.

这很好,但是,特别是在Firefox中,如果在浏览器窗口/选项卡未激活(即最小化,在后台等)时会发生会话状态更改,则页面不会正确刷新.换句话说,您可以看到新页面的控件(例如用户名文本字段和密码字段),但不会看到新页面的背景,而是看到旧页面的背景.

它在Chrome和IE中完美运行,我们只在Firefox上看到这个问题.此外,当浏览器窗口/选项卡处于活动状态时,它也可以在Firefox上完美运行.

有什么想法吗 ？

Answer 1

让它成为另一种方式吧。不要使用 rootScope 广播，只需在服务中获取当前状态的 var，并返回具有该值的函数。

var userSession = 'Expired';

return {
   getSessionState: function () {
      return userSession;
   }
}

并在控制器中观看。因此，第一次摘要运行会将视图切换到您现在需要的视图。

$scope.$watch(function () {
    return yourServiceName.getSessionState()
}, function (val) {
   //you can check the val here and change the route
});

如果这没有帮助，请确保您使用 $timeout （使用摘要的 Angulars 本机超时）并且没有任何设置超时（当浏览器窗口/选项卡不活动时，JS 超时会停止，并且当选项卡处于焦点时一次全部触发再说一次，Angular 中可能会出现奇怪的行为）。