Defer Angular UI Router $stateChangeStart until server authorization response receieved

Question

I have an Angular app using UI Router where I'm trying to validate a user's token, if one exists, when the app runs. I am also checking that the user has permission to access certains routes. The problem is that $stateChangeStart is running before I receive the response back from the authorization endpoint. Here's some code (coffeescript with js below) - this is all within my run block.

app.run(($rootScope, $state, $stateParams, $log, Auth) ->

  currentState = 'home'

  $rootScope.$state = $state

  # read a cookie if cookie exists
  if Auth.setAuthenticationToken()
    # hit api endpoint to validate token
    Auth.validateToken (user) ->
      # route to current state
      # this returns after $stateChangeStart runs below
      $state.go(currentState)

  $rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) ->

    currentState = toState.name

    Auth.setAuthenticationToken()

    $rootScope.error = null

    # compare users access permissions with incoming route's access level
    if (!Auth.authorize toState.data.access, Auth.user)
      event.preventDefault()
      $rootScope.error = "Sorry, you haven't provided the required credentials."
      $log.warn $rootScope.error
)

My question is how can I get the $stateChangeStart to run only after the response from the auth endpoint has been returned. This only needs to happen the first time. Every subsequent state change can be done without hitting the auth endpoint.

I also have a similar issue. I want the `$rootScope.$on('$stateChangeStart', function(){}` to execute only after a `resolve` in one of ui-router states. Problem is that the event $stateChangeStart triggers before the resovle can execute. Did you ever hit on a solution? — chuck w, Sep 12 '14 at 01:39

calebboyd · Answer 1 · 2014-01-25T20:53:31.830

I'd create a function in your Auth service that returns a promise. Later, resolve (authorized) or reject (not authrized) that deferred. Then use it on the resolve property of your route definitions

$stateProvider.state('stateName',{
    ...
    ...
    resolve: {
         isAuthorized: function(Auth){
             return Auth.checkAuthorization();
         }
    }
})

To support subsequent checks you could maintain a promise within the service This might look like:

myApp.service('Auth',function($http,$q){
    var authStatusDeferred = $q.defer();
    this.checkAuthorization = function(){
        return authStatusDeferred.promise;
    };

    this.validateToken = function(user){
        var isValid = false;
        //..do validation stuff
        if(isValid) authStatusDeferred.resolve();
        //Otherwise state change will not happen..            
    };



});

oh, sorry about no coffee

I can't see how it defers `$stateChangeStart`. I guess, `$stateChangeStart` will work as it supposed to do. Only state`s controller will wait till resolution. — Serhii Holinei, Apr 06 '15 at 07:38
i guess you can't use $stateChangeStart with the above solution in this case, since the event fires anyway and afterwards you're too late to use the promise. — windmaomao, Nov 10 '15 at 23:05

score 1 · Answer 2 · edited Jun 29 '16 at 07:50

1

You should call $urlRouter.sync() after you have got user data. Also you might want to protect $stateChangeStart by using event.preventDefault() in case when user was not obtained.

edited Jun 29 '16 at 07:50

T J

42,762
13
83
138

answered Sep 01 '14 at 08:52

Pavel Blagodov

572
5
6

score 1 · Answer 3 · edited Mar 25 '16 at 05:59

I guess it's too late for answering this question, but I want to comment here for someone who may need a little idea.

I've tried to do almost same thing for a long time and I stopped doing that. I don't think stateChangeStart listener is reliable to use. I think the best way to do your what you want is decorating $state.go using $provide service. Here is an example:

/* config your angular app */
.config(function($provide) {
    $provide.decorator('$state', function($delegate) {

        var myState = $delegate;
        // Rename original 'go' method
        myState.originalGo = myState.go;

        myState.go = function(toState, toParams, options) {

        /*  
         *  Do what you want to do :)
         */

        this.originalGo(toState, toParams, options);
    };

    return $delegate;
  });

With this approach, you can do whatever you want before $stateChangeStart. I hope it helps.

score 1 · Answer 4 · edited May 23 '17 at 12:19

I have found a very good way to make this work properly and not rely on resolve at all in another answer here. Here is the code:

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

    if (dataService.isInitialized()) {
        proceedAsUsual(); // Do the required actions based on the data you received in the service
    } 
    else {

        event.preventDefault();

        dataService.intialize().success(function () {
                $state.go(toState, toParams);
        });
    }
});

Then you can just remember that your data is already initialized in the service the way you like, e.g.:

function dataService() {

    var initialized = false;

    return {
        initialize: initialize,
        isInitialized: isInitialized
    }

    function intialize() {

        return $http.get(...)
                    .success(function(response) {
                            initialized=true;
                    });

    }

    function isInitialized() {
        return initialized;
    }
};

Defer Angular UI Router $stateChangeStart until server authorization response receieved

4 Answers4

Linked