Difficultly with $locationChangeStart and $stateChangeStart events in AngularJS

Question

I'm having the classic problem where the $locationChangeStart event fires multiple times. I've tried to use the preventDefault but I can't seem to master this.

Two problems - first scenario uses $location and the second uses $state:

Once user is authenticated, I redirect using $state.go('main') , however $locationChangeStart is fired again. I do not want this behavior.
With the ui-router $stateChangeStart event, I basically hit an infinite loop scenario. Meaning that, when this event fires I check for user authentication. If the user is NOT authenticated, I then redirect using $state.go('login');. This causes an infinite loop.

Here's my app.js for starters:

(function () {
    'use strict';
    angular.module('rage', [
       'ui.router',
       'ui.bootstrap',
       'ui.dashboard',
       'kendo.directives'       
    ]).run(['$rootScope', '$state',  '$location', 'userService', 'loginService', init]);

    function init($rootScope, $state, $location, userService, loginService) {
        $rootScope.rageSessionVars = {};
        $rootScope.$state = $state;        
        $rootScope.isLoggedin = false;   // just something to possibly use ???


        $rootScope.$on('$locationChangeStart', function () {

            var userToken = loginService.getUserCookie();

            // check if cookie expired, then authenticate user !
            if (userToken) {
                if (!loginService.isUserCookieExpired(userToken)) {
                    if (loginService.authUser(userToken)) {
                        $state.go('main');
                    }
                    else {                     
                        $location.url('index.html#/?login');    // not authenticated !
                    }
                }
            }
            else {
                $state.go('login');
                $location.url('index.html#/?login');
            }
        });

    }

})();

I've also created a plunker for a similar scenario yesterday, and simply modified the app.js to now include the locationChangeStart event.

Online plunker here: http://plnkr.co/edit/hsSrPqFp0hpJ4A8cTsVL?p=preview

Bottom line is I'd like to hook into one of these event for a smooth user Login/Logout experience, but I always end up in a snag with these Angular events.

Thank you in advance for your expert tips.

regards, Bob

Doing that in terms of route resolvers is always preferable http://stackoverflow.com/a/33021912/3731501 — Estus Flask, Oct 14 '15 at 23:17

Farzad Yousefzadeh · Answer 1 · 2015-10-14T22:18:08.367

1

While using angular ui router, use $stateChangeStart and $stateChangeSuccess to control actions like authentications and manual routing during state changing.

edited Oct 14 '15 at 22:18

answered Oct 14 '15 at 22:10

Farzad Yousefzadeh

2,461
1
20
27

I was using `$stateChangeStart`, but I was running into a similar situation where it would fire multiple times. Perhaps I should revisit $stateChangeStart events – bob.mazzo Oct 14 '15 at 22:14
okay so I've updated my plunk to include `$rootScope.$on('$locationChangeStart')` . I seem to be already in an indefinite loop. My goodness - http://plnkr.co/edit/hsSrPqFp0hpJ4A8cTsVL return token; }; – bob.mazzo Oct 14 '15 at 22:55
I'm already familiar with the angular ui route events like `$stateChangeStart`, but as I mentioned before - I have difficulty implementing them. Please see my plunk, which has an endless loop in my `$stateChangeStart`. Note: In my app.js, I've added a `return;` statement to prevent the endless loop for now. – bob.mazzo Oct 15 '15 at 13:45

Difficultly with $locationChangeStart and $stateChangeStart events in AngularJS

1 Answers1