3

I have built a simple application in Angular consuming a simple API I created myself using Laravel. The application is hosted here. The API is hosted here. Now I can log in to the application at which point the API returns a simple auth_token which is sent as the URL parameter in every subsequent request that is sent to the server.

There is only one user in the system:

Email: admin@admin.com
Password: admin12345

You can log into the application using these credentials at which point the application will set a cookie using the $cookieStore service and will use the token in this cookie for every subsequent request. After using the application, a user can log out from the application, where a DELETE request is sent to the server and on the success method, the cookie is deleted from the browser.

Unfortunately there is some issue with the code I suppose. The DELETE request is working as expected and it deletes the auth_token on the server and returns 200 OK. But the success method is not called. I am not sure what I am doing wrong. It might be just a syntax problem.

app.js

function AppCtrl ($scope, $cookieStore, $location, Auth) {
  $scope.setActive = function (type) {
    $scope.destinationsActive = '';
    $scope.flightsActive = '';
    $scope.reservationsActive = '';

    $scope[type + 'Active'] = 'active';
  };

  $scope.authenticate = function (credentials) {
    Auth.save(credentials, function(data){
      $cookieStore.put('auth_token', data.auth_token);
      $scope.isLoggedIn = true;
      $location.path('destinations');
      $scope.message = null;
    }, function(data){
      $scope.message = "Email/Password combination incorrect!";
    });
  };

  $scope.logout = function () {
    //var auth_token = $cookieStore.get('auth_token');
    Auth.delete({
      'auth_token': $cookieStore.get('auth_token')
    }, function(data){
      $scope.isLoggedIn = false;
      $cookieStore.remove('auth_token');
    });

  };

  if($cookieStore.get('auth_token')){
    $scope.isLoggedIn = true;
  }else{
    $scope.isLoggedIn = false;
  }

}

The logout function is called when the log out button is pressed. What am I doing wrong here?

Note: The application is not working on Chrome for some reason (Use Firefox). If you can shed some light on that, it would be very helpful.

Both the repositories are public if you wish to have a look:

AngulAir Application: http://gitlab.learningtechasia.com:8901/rohan0793/angulair.git

AngulAirAPI: http://gitlab.learningtechasia.com:8901/rohan0793/angulairapi.git

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Rohan
  • 13,308
  • 21
  • 81
  • 154
  • There are 2 files which are not loading in chrome.Giving 404 error. http://angulair.rohanchhabra.in/js/controllers/login.js http://angulair.rohanchhabra.in/controller.js That may causing a problem.. – Pankaj Parkar Dec 25 '14 at 08:38
  • I know. That is what I don't understand. CORS is enabled on my server. The site works on Firefox and fetches all files. – Rohan Dec 25 '14 at 08:40
  • same issue in Mozilla, i saw the same error in network tab of developer tool – Pankaj Parkar Dec 25 '14 at 08:44
  • I just digged into your project & found that..controllers/login.js & controller.js is missing from your git repo.. – Pankaj Parkar Dec 25 '14 at 08:55

1 Answers1

2

Here is your solution

$scope.logout = function () {
    //var auth_token = $cookieStore.get('auth_token');
    Auth.delete(
    {'auth_token': $cookieStore.get('auth_token')}, // parameters
    {},//postData, which you don't need for this
    function(data){
      $scope.isLoggedIn = false;
      $cookieStore.remove('auth_token');
    },
    // error callback
    function (httpResponse) {
       // do what you want for error handling here
    }
  );  
  };

Note:-> (Below points solved the problem)

  1. Only the 2nd option(postdata) in $resource.delete API was missing. We should give it as a blank {} if it is not required for API.
  2. And delete method should return 204 Status Code in order to execute success callback.
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • When I press the log out button, the success method is not called for some reason. I tried inserting a `alert('hello')` in there, and it did not fire. – Rohan Dec 25 '14 at 15:06
  • After fiddling around for a while, I realized that the response code generated from the server was 200, but usually a 204 is sent after a delete request is generated. This is why the success method was not called and it was causing issues deleting the auth_token from the browser cookie. – Rohan Dec 25 '14 at 15:11
  • You can edit the answer with the syntax problem and add the response code problem and I will accept it. Please keep the response code edit in bold so that anyone else developing an API which is to be consumed would understand if he stumbles here. – Rohan Dec 25 '14 at 15:13
  • Yes, because I just corrected the response code in my API which is why it is working. – Rohan Dec 25 '14 at 16:08
  • 1
    Yes, I did. I am using your code in my application. You corrected my syntax issues. Thank you for that. It still wasn't working because the response code did not fire the success method. But when I fixed the response code, everything fell in place. That is why I am asking you to add that point in your answer so that anyone else having a similar problem will understand that the delete request needs a 204 to fire the success method. – Rohan Dec 25 '14 at 16:14
  • I edited my answer. If you felt something wrong you can correct it at any time. Thanks bro. – Pankaj Parkar Dec 25 '14 at 16:25
  • Did you get any clue for that CORS issue? – Pankaj Parkar Dec 25 '14 at 16:30
  • I am not sure. The application is still not working in Chrome for some reason. – Rohan Dec 25 '14 at 16:34
  • I will let you know, if i get something in it..Thanks – Pankaj Parkar Dec 25 '14 at 16:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67676/discussion-between-pankajparkar-and-rohan). – Pankaj Parkar Dec 25 '14 at 16:54