Angular Intercepting a particular http request and prompt for login

Question

I am working on an angular app. It's an SPA. I am loading the profile(or myAccount) page into the home page when user clicks on a link.

<a href="#" ng-click="getProfileData()"/></a>

in my controller:

$scope.getProfileData(){
    $http.get('/profile').then(
        function success(){
        },
        function error(){
        }
    }
}

the link makes an ajax request through $http service of angular.

what I want to do is, when user clicks on the link, before making the ajax request to check if he's logged in or not. if not, open the sign in popup, and after sign in continue with the same request.

I've looked into $httpProvider.interceptors, but I'm still not sure how to do it, since I need to pause hold the $http request till the login is completed, modify the config by adding login details into it and then continue.

Is using of interceptors the correct option? If yes, how should I proceed towards my objective?

EDIT:

my primary concern is to continue with the same request. i.e. i don't want the user to click on profile link again after he has logged in. i can check if user is logged in or not before making the ajax request. if he is, then it's good. but if he's not, he has to log in (in the modal i pop up), and then he has to click on the profile link again. is there a way to continue the previous http request after login?

Answer 1

There are only three points in the application where the login modal should appear:

1. When you are on a welcome page and you click “Login”.
2. When you are not logged in and you attempt to visit a page that requires login.
3. When you attempt to make a request that requires a login(Ex:session expiration).

---

Determining which pages require a logged in user

Considering you are using ui router,you can secure routes of your application with the help of attaching additional properties to a route.Here we add a requireLogin property for each state.

app.config(function ($stateProvider) {

  $stateProvider
    .state('welcome', {
      url: '/welcome',
      // ...
      data: {
        requireLogin: false
      }
    })
    .state('app', {
      abstract: true,
      // ...
      data: {
        requireLogin: true // this property will apply to all children of 'app'
      }
    })

});

For routes that do not require a login we set requireLogin to false.

---

Capturing attempted state changes

This is where we are going to capture the attempted state changes and inspect them for our requireLogin property.

app.run(function ($rootScope) {

  $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
    var requireLogin = toState.data.requireLogin;

    if (requireLogin && typeof $rootScope.currentUser === 'undefined') {
      event.preventDefault();
      $rootScope.returnToState = toState.url;
      // get me a login modal!
    }
  });

});

As you can see, if the route requires a login and $rootScope.currentUser is not yet set, we will prevent the attempted state change and show the modal.

---

Redirecting to initially requested url after login

The last part requires redirecting to the initially requested url after login.In our app.run we have set a variable $rootScope.returnToState = toState.url which we can use in our login controller to redirect.In our controller for the login page we can do something like this:

$scope.login = function(form) {
  $scope.submitted = true;

  if(form.$valid) {
    Auth.login({
      email: $scope.user.email,
      password: $scope.user.password
    })
    .then( function() {
      // Logged in, redirect to correct room
      if( $rootScope.returnToState) {
        $location.path($rootScope.returnToState);
      } else {
        //redirect all others after login to /rooms
        $location.path('/home');
      }
    })
    .catch( function(err) {
      $scope.errors.other = err.message;
    });
  }
};

For further reference please refer to this blog post http://brewhouse.io/blog/2014/12/09/authentication-made-simple-in-single-page-angularjs-applications.html

This can help you build a rock solid authorization for your app which I think you might be looking for.

Answer 2

Why can't you just make another function call to verify, if the user is logged-in. And based on that fire up the ajax request that you are trying up there. Something like

$scope.getProfileData(){
    if($scope.isLoggedin()){
        $http.get('/profile').then(
            function success(){
            },
            function error(){
            }
        }
    }
};

$scope.isLoggedin = function(){
    // Do some processing and return true/false based on if user is logged-in
};