$ State.go from Angular UI Router does not work as expected

advertisements

This is the Plunker link of the issue. I have configured 3 states : signup, signin & todos. I have configured run block too with $stateChangeStart event attached, to ensure i redirect to signin page if user is not logged in. In my project i use AuthencationService for the validation but i have commented that part to simplify the example.

Ideally, if my understanding is correct, $stateChangeStart will be called on every state change & it will be called when loading the application too. So no matter which state i hit i should be redirected to signin state, as i do not have any AuthenticationService checks here. I have written console.log to check it & its getting called.

console.log('User is not signed in !! Sign-in please.');

When the application loads (here when you load the plunker), console.log is getting printed

But the next statement $state.go('signin' , {}, {notify: false}); is not taking view to signin page.

WTF ?

I have commented event.preventDefault(); despite of knowing its use. If i use it then nothing gets loaded, not even todos page !


Keep the notify, use event.preventDefault() and watch out for infinite loop

https://plnkr.co/edit/pHLyUwCXBG4KwWdmI3l8?p=preview

Edit: To elaborate on the infinite loop. You set up simple condition to check if user is logged in. If not, you want to redirect him to signin page. However, this check also fires for the signin state, so you get infinite loop of redirects. Just add simple if to check if currentState is the signin state, where you want to redirect.

event.preventDefault() is the correct way to stop state transition, so leave that one uncommented.