My question is similar to this one:stop angular-ui-router navigation until promise is resolved
Despite exploring various answers, none have successfully addressed my issue.
In my application, a cookie containing a token is stored. Upon page load (such as after pressing F5), the application checks for this cookie. If it exists, the token is used to retrieve user settings from a web service. These settings are crucial for accessing information from other web services that my controllers will call, hence they need to be loaded before rendering the page.
Below is the snippet of my current code:
$rootScope.$on( '$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
e.preventDefault();
authentication.checkCookie(function() {
if (toState.name == 'login'){
if(authentication.getLoginData()) {
//e.preventDefault();
$state.go('pricelist');
}
} else {
if(!authentication.getLoginData()) {
//e.preventDefault();
$state.go('login');
}
}
// No redirect is needed - now render the page requested
$urlRouter.sync();
});
});
Regrettably, this code has not been successful as it leads to an infinite loop.
How can I ensure that the rendering process only proceeds once the cookie is checked and the user settings are fully loaded (which is also done in checkCookie)?