Angular - How to check if user is allowed before loading the view?

I have an angular app. I am using ui-router to manage my states. I need to call a common API to check whether the user is allowed to view the web page or not. Is there a common place where I can call the API and only then proceed to the state the user is requesting for?

With my current implementation, the view partially gets displayed and then the reroute happens.

//app.js

$rootScope.$on('$stateChangeSuccess', function(evt, toState) {

    if(toState.name === 'login' || toState.name === 'payment')
        retu;

    userService.isBillingCleared().then(function() {
        //redirect to toState
    }, function() {
        $state.go('payment');
    });
});

How do I prevent this?