CODEWITHSUNDEEP
angularjsdjangodjango-rest-framework
Skatch
Skatch

Reputation: 2282

Angular not receiving 401 and 400 http response from django rest framework

When I send correct credentials, I get a HTTP_200_OK response and everything works as expected. But, when I send incorrect or incomplete login credentials, I don't get any response. Here's my code:

Angular (authService.js login function):

$http({
    method : 'POST',
    url : API_LOCATION + 'login',
    data : $.param(credentials),
    headers : {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function(response){
    console.log(response);
    if(response.status == 200){
        authService.currentUser = response.data;
        $location.path('/')
    }
    else {
        $rootScope.alert = response.data.message;
    }
});

Django rest framework - login view:

class LoginView(views.APIView):

    serializer_class = UsersSerializer
    permission_classes = (AllowAny, )
    allowed_methods = ('GET', 'POST', 'OPTIONS', 'HEAD')

    def get(self, *args, **kwargs):
        serializer = self.serializer_class(self.request.user, context={'request' : self.request})
        return Response(serializer.data)

    def post(self, *args, **kwargs):

        username = self.request.data.get('username', None)
        password = self.request.data.get('password', None)

        if username and password:
            user = authenticate(username=username, password=password)

        else:
            print '400'
            return Response({"message": "Both fields are required"}, status=views.status.HTTP_400_BAD_REQUEST)

        if not user:
            print '401'
            return Response({"message": "Incorrect login"}, status=views.status.HTTP_401_UNAUTHORIZED)

        login(self.request, user)

        serializer = self.serializer_class(user, context={'request' : self.request})

        return Response(serializer.data, status = views.status.HTTP_200_OK)

'400' and '401' are printed in the console respectively, but I don't get any response in angular. Help?

EDIT

Thanks pgreen2, got it. Error responses are received in the error callback function:

$http({
    method : 'POST',
    url : API_LOCATION + 'login',
    data : $.param(credentials),
    headers : {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(response) {
    if(response.status == 200){
        authService.currentUser = response.data;
        $location.path('/')
    }
}, function errorCallback(response) {
    console.log(response)
});

Upvotes: 1

Views: 798

Answers (1)

pgreen2
pgreen2

Reputation: 3651

401 and 400 are error codes so you need to add .catch() to your promise in angular. The errornis happening, but you have no code handling it.

Update:

$http({
    method : 'POST',
    url : API_LOCATION + 'login',
    data : $.param(credentials),
    headers : {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function(response){
    console.log(response);
    authService.currentUser = response.data;
    $location.path('/')
}).catch(function(response){
    console.log(response);
    $rootScope.alert = response.data.message;
});

Upvotes: 1

Related Questions