2

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:

  1. A user has tried to do something without being authenticated by sending a request to the server
  2. The server responds with either a 401 or 403 because the user is not authenticated.
  3. 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.
  4. 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.

2 Answers 2

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

1
  • I like the usage of the $q promise. I didn't know you could use it for anything other than request/response events. So, a $q is just an easier/neater way to do callbacks? Dec 14, 2013 at 23:03
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.