Prevent Angular controller from loading using UI Router resolve

Question

Im trying to use a promise to prevent a state from loading in UI Router $resolve.

$stateProvider.state('base.restricted', {

    url:'/restricted',
    templateUrl: 'views/restricted.html',
    controller: 'restrictedCtrl',

    resolve: { // user must be logged-in to proceed

        // authentication service checks session on back-end
        authenticate: function ($q, $state, $timeout, AuthService){

            AuthService.validate(token).then(function(res){ 

                if( res.data.response.status===1 ) { // authenticated!

                    return $q.resolve(); // load state

                } else { // authentication failed :(

                    $timeout(function() { $state.go('base.notfound') }); // load not found page
                    return $q.reject(); // do not load state
                }

            });
        } 
    }

})

This scheme works in terms of redirecting the user based on authentication results, but it looks like, upon failed authentication, the controller is still being loaded for a brief instant before the user is re-directed to the "not found" state.

I believe the reason is because Im running AuthService within resolve, but in an asynchronous manner. So the controller is loaded while AuthService does its thing but is then redirected once the callback function executes.

But isnt resolve inherently supposed to be blocking? That is, the controller doesnt load until resolve is "resolved"?

AuthService is basically this, fyi:

.service('AuthService', function($http){

    this.validate = function(token){

        return $http.get('http://my.api/validate/'+token);
    }
});

How can I modify this code to prevent loading until AuthService's callback function has completed.

Frank Modica · Accepted Answer · 2017-06-17 02:24:24Z

2

You should return a promise immediately, instead of doing so after the response from the service comes back:

return AuthService.validate(token).then(function(res){ ... }

Otherwise the router sees no return value instead of a promise, so it thinks it's OK to load the state. Then later when your AJAX request returns you end up redirecting, which is why you see a flicker.

edited Jun 17, 2017 at 2:24

answered Jun 17, 2017 at 2:21

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brahim LAMJAGUAR Over a year ago

Thank you for the answer and the explanation I had the same problem

Collectives™ on Stack Overflow

Prevent Angular controller from loading using UI Router resolve

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related