AngularJs Global Message Service and Authentication - angularjs

Question

I have a message system in place that has two methods show and clear. I want to use $http interceptors in order to handle authentication because my server is smart enough to know whether a user is authenticated or not per request and will tell me so by sending me me a status response of 401 or 403. So, I have something like this for my interceptor:
myModule.factory('statusInterceptor', function($location, MessageService, urlManager){
return {
responseError: function(response){
switch(response.status){
...
case 401:
case 403:
$location.url(urlManager.reverse('Login'));
MessageService.show('Dude, you need to log in first.');
break;
case 500:
break;
...
}
return response;
}
};
});
That works just fine on either a 401 or a 403 response as it shows the message as expected. The problem I'm having is clearing the message whenever the user logs in or goes to another route. I have a MainCtrl that is in charge of almost everything and one of the things that it is looking after is $routeChangeStart. My thought being that the view is changing to a different view, so I want to clear the messages at the beginning of the route switch. So, in my MainCtrl I have:
myControllers.controller('MainCtrl', function($scope, MessageService){
$scope.$on('$routeChangeStart', function(){
MessageService.clear();
});
});
Here's the way I expect the app to react:
A user has tried to do something without being authenticated by sending a request to the server
The server responds with either a 401 or 403 because the user is not authenticated.
The responseError function is fired calling my $location.url() method which, in my mind, should fire the $routeChangeStart, or even $locationChangeStart, events (I've tried both).
This should in turn fire my MessageService.clear() method and clear out any previous message.
The user is finally redirected to the login page with the correct "Dude, you need to log in first." message.
What really happens:
The user is redirected to the login page as expected, however, the error message does not display. When setting certain debug points in Chrome, I see that $location.path() is called immediately followed by MessageService.show('Dude...'), finally followed by the MessageService.clear() call.

Answer 1

Maybe you like this approach to that problem
http://jsfiddle.net/jYCPQ/1/
module.factory('authenticationInterceptor', function ($q, navigator, MessageService) {
return {
responseError: function (response) {
switch (response.status) {
case 403:
navigator.navigateTo("/login").then(function () {
MessageService.show('Dude, you need to log in first.');
});
return $q.reject(response);
}
return response;
}
};
});
module.factory("navigator", function ($location, $rootScope, $q) {
var navigateTo = function (url) {
var defered = $q.defer();
$location.url(url);
var unbind = $rootScope.$on('$routeChangeSuccess', function () {
defered.resolve();
unbind();
})
return defered.promise;
}
return {
navigateTo: navigateTo
}
});
regards

Answer 2

I finally found a solution and ended up with something like this:
In my interceptor function:
myModule.factory('statusInterceptor', function($rootScope){
return {
responseError: function(response){
switch(response.status){
...
case 401:
case 403:
$rootScope.$broadcast('event:notAuthenticated');
break;
case 500:
break;
...
}
return response;
}
};
});
And in my controller:
myControllers.controller('MainCtrl', function($scope, $location, MessageService){
$scope.$on('event:notAuthenticated', function(){
$location.path(urlManager.reverse('Login'));
var remove_this_binding = $scope.$on('$routeChangeSuccess', function(){
messageService.show('Dude, you need to log in first.');
remove_this_binding();
});
});
$scope.$on('$routeChangeStart', function(){
messageService.clear();
});
});
I was trying to find an angular way of having a callback associated with $location's path change and this is the best I could come up with. If anyone else has a better solution, I'm all ears.