Firefox nie aktualizuje poprawnie strony po zmianie stanu, gdy nie jest aktywny.

Question

Mamy aplikację kątową (SPA), która utrzymuje sesję użytkownika po stronie klienta (limit czasu sesji, czas nieaktywności itp.). Sesja jest używana, aby zmusić użytkownika do ponownego zalogowania się, gdy sesja wygasa z jakiegoś powodu.

Wygasanie sesji jest kontrolowane przez dedykowaną usługę, która rozgłasza zdarzenie na $ rootScope, gdy sesja kończy się, blokuje lub w inny sposób zmienia stan.

Dodajemy słuchaczy do tych zdarzeń zmiany stanu sesji, które zmieniają trasę do odpowiedniej strony (strona logowania, strona odblokowania itp.). Do routingu używamy routera kątowego.

Działa to dobrze, jednak w szczególności w Firefoksie, jeśli zmiany stanu sesji mają miejsce, gdy okno/karta przeglądarki jest nieaktywna (tj. Zminimalizowana, w tle itd.), Strona nie jest poprawnie odświeżana. Innymi słowy, możesz zobaczyć kontrolki nowej strony (np. Pole tekstowe nazwy użytkownika i hasło), ale zamiast widzieć tło nowej strony, widzisz stary.

Działa to doskonale w Chrome i IE, widzimy tylko ten problem w Firefoksie. Ponadto, gdy okno/zakładka przeglądarki jest aktywna, działa również doskonale w Firefoksie.

Jakieś myśli?

Answer 1

Niech będzie inaczej. Nie używaj emisji rootScope, po prostu weź zmienną w swoim serwisie z bieżącym stanem i zwróć funkcję z tą wartością.

var userSession = 'Expired'; 

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

i obejrzeć go w kontrolerach. Tak więc pierwszy przebieg skrótu zmieni widok na taki, który jest teraz potrzebny.

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

Jeśli to nie pomogło, upewnij się, że używasz $ timeout (Angulars natywną limit czasu przy użyciu likwidacji) i brak jakichkolwiek set timeout (limity czasu JS są zatrzymywane, gdy okno przeglądarki/zakładka nie jest aktywne i nie ognia wszystkim na jeden raz, gdy zakładka ponownie się skupi, co może skończyć się dziwnym zachowaniem w Angular).