Preventing Unauthorized URL Changes in AngularJS Based on HTTP Request

I am attempting to prevent navigation in AngularJS based upon the result of an HTTP GET to an authorization endpoint (which ties into my Spring Security architecture, but that’s not important to this question).

I have attached the following to a run() block attached to my top-level module:

    $rootScope.$on("$locationChangeStart", function(event, newUrl, oldUrl) {

        var path = $location.path();
        $http.get('/svc/authorize/view?urlPath=' + path).then(response => {
            if (response.data.result === "NOT_AUTHORIZED") {
                event.preventDefault();
                console.log("Prevented unauthorized location change");
                $ui.showError("Unable to Navigate to " + newUrl);
            }

        });
    });

(Note: $ui is our service, not an AngularJS or third-party tool).

Unfortunately, due to the asynchronous $http.get(), the page loads before the call completes.

In case it helps, here is an example of our of our route definitions:

    $routeProvider.when('/problem', {
        templateUrl: '/app/management/problem/problem.tmpl.html',
        controller: 'problemCtrl'
    });

Can anyone help me? I’m hoping I just made a stupid error in handling the asynchronous call.

Source: AngularJS