I'm trying to delay loading other controllers until authentication has taken place in my MainCtrl.
index.html:
<body ng-app="MyApp" ng-controller="MainCtrl">
...
<div ng-view>
...
</div>
...
</body>
MainCtrl:
var checkAuth = function () {
var deferred = $q.defer();
userAuth.isAuthenticated(
function () {
$rootScope.user = userAuth.user.data;
deferred.resolve();
}, function () {
$rootScope.user = false;
deferred.resolve();
});
return deferred.promise;
};
$scope.$watch('$location.path()', function () {
$rootScope.$on('$locationChangeSuccess', function (event) {
checkAuth();
});
});
What I want is for the checkAuth function to run and then if the user is authorised, to load a partial and controller.
I have tried various solutions as suggested in similar questions (Delaying AngularJS route change until model loaded to prevent flicker, Angular.js delaying controller initialization, AngularJS - prevent not authenticated user from accessing given routes) but the problem is that none of them work when the page is refreshed or if the user is arriving from an external page. I've tried to use $locationChangeSuccess to run the authentication on page load but the partial controller doesn't wait for the authentication to be run before loading.
Can anyone suggest a better solution or where I might be going wrong with my approach?