ui-router: $stateChangeStart -> event.preventDefault() forces wrong url change.

in my main controller:

$rootScope.$on('$locationChangeStart', function(event, toUrl, fromUrl) {
  console.log(toUrl);
});

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if (notLoggedIn) {
        event.preventDefault();
        $state.go('login');
    }
});

states definition (just the relevant portion, other states are obviously there):

$urlRouterProvider.when('', '/home');
$urlRouterProvider.otherwise('/error/not-found');

console output

http://localhost/app/
http://localhost/app/#!/home
http://localhost/app/#!/
http://localhost/app/#!/error/not-found

so it first loads the application http://localhost/app/ then it applies the first “when” condition on urlRouter level, so it goes to /home. http://localhost/app/#!/home Then, the $stateChangeStart triggers, checks that user is not logged is (own logic), and does event.preventDefault(). At this stage, instantly, the url is reset http://localhost/app/#!/ and somehow, the “otherwise” condition triggers in http://localhost/app/#!/error/not-found

This 3rd step is unexpected and breaks the flow of the application (preventing interferes with urlRouter)

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 29 (4 by maintainers)

Most upvoted comments

After some issue studying, rewriting my otherwise statement to this

$urlRouterProvider.otherwise(function($injector) {
    var $state = $injector.get("$state");
    $state.go("error.404");
});

solved my preventDefault() issue.

(Sorry, don’t know where i copied that from)

readme42 on Sep 30, 2015

Was experiencing this issue myself with an outdated version of ui-router v0.2.15 and tried all the work arounds to no avail. For anyone experiencing this issue, ui-router v0.4.2 has now rectified the issue.

adrianzielonka on Feb 9, 2017

The work around I found was:-

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if (notLoggedIn) {
        event.preventDefault();
        return $state.go('login');
    }

    return;
});

The key for me was to return the new state

adammartin1981 on May 27, 2015

Yes, that’s it. I have the login redirect right after the preventDefault (edited my initial code), pretty much the same as you’ve described. But it will never reach it, as preventDefault resets the url and then triggers the “otherwise” condition on urlRouter. I do understand that in this particular case, there’s no previous state and maybe the url reset makes sense. But it collides with otherwise, which prevents the redirect from working.

I’m not very good at providing sample codes on these external services, sorry. This should do, though. angular 1.3.8, newest ui-router.

sebastian-zarzycki on Jan 21, 2015