Prevent from route change in AngularJS - ajax

Question

$rootScope.$on("$locationChangeStart", function(event, next, current) {
var partsOfUrl = next.split('/');
var isLogin = false;
if(partsOfUrl.indexOf("signin") > 0) {
isLogin = true;
}
var myDataPromise = loginService.getData();
myDataPromise.then(function(data) { // this is only run after $http completes
if(!isLogin) {
if(data.logout) {
$location.url("pages/signin");
event.preventDefault();
} else{}
} else {
if(data.logout) {
} else {
}
}
});
console.log(next);
});
This is the code i used to check user authentication and prevent the protected areas. But problem here is if a user try to access protected then immediately browser shows the secure page and then get back to login page instead of redirecting to login page first. I think that's because of user authentication process is done through an Ajax call so the program never holds for the response. What's the wrong here and how should i get rid of it ?

Answer 1

Try with httpInterceptor (from mean.io stack)
btw the server should response with a 401 status
'use strict';
angular.module('mean-factory-interceptor',[])
.factory('httpInterceptor', ['$q','$location',function ($q,$location) {
return {
'response': function(response) {
if (response.status === 401) {
$location.path('/signin');
return $q.reject(response);
}
return response || $q.when(response);
},
'responseError': function(rejection) {
if (rejection.status === 401) {
$location.url('/signin');
return $q.reject(rejection);
}
return $q.reject(rejection);
}
};
}
])
//Http Intercpetor to check auth failures for xhr requests
.config(['$httpProvider',function($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
}]);