Friday, December 21, 2018

angularjs - Ui-Router $state.go inside $on('$stateChangeStart') is cauzing an infinite loop



I'm trying to introduce login into the way the user navigates accross the application.



I pretend to redirect the user to the page were he was before he navigate to the login page if that page meets specific requirements




Preventing the event from the $stateChangeStart stop's the state change like expected but when i run the $state.go('into_somewhere') i enter an infinit loop



My angular version is 1.3.1 and the ui-router is the latest



.factory('RouteHistory', function ($rootScope,$log, $state, Auth, $urlRouter, $timeout) {

// after the user enter a page
var currentState = '';


// when the user is trying to access a page that he has not permissions
// or that requires the user to be logged in
var pendingState = '';

var isMenuTogglerVisible = false;
var skipFromStateVal = true;

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){

event.preventDefault();




if (toState.name == 'login' && fromState.name != 'login'){
$log.log('Ui-router: changing to login');
// $urlRouter.sync();
$state.go('login')
//pendingState = fromState;
//$log.log('Peding state updated to:' + pendingState.name );
//$urlRouter.sync();

}

if (fromState.name == 'login' && Auth.isLoggedIn()) {
$log.log('Ui-router: going from login');
//$state.go(fromState.name);
$timeout(function(){
// $state.go('home', null, {/*reload: true, location: 'replace'*/});
$state.go('browse-machine');
//$urlRouter.sync();
},2000)

}



$log.log({
'toState': toState,
'toParams': toParams,
'fromState': fromState,
'fromParams': fromParams
})


})


return {

};
});

Answer




In general I would say, let's redirect ($state.go()) only if needed. In other cases, get out from the event listener:



if (toState.name === 'login' ){
// doe she/he try to go to login? - let him/her go
return;
}

if(Auth.isLoggedIn()){
// is logged in? - can go anyhwere
return;

}

// else
$state.go('login')


This is simplified logic, but shows, that we should change to execution only if needed. There are some other examles with more detailed implementation and plunkers:






As provided in the comment, there was plunker, which I changed like this here



...
// three new lines
if (toState.name === 'specialRoute'){
return;
}

if (fromState.name=='route1'){
event.preventDefault();

$state.go('specialRoute')
}


And this is not looping anymore. Please, check it here


No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...