Django Rest Framework + AngularJS not logging user in or throwing errors

问题

This is my URLS.py:

from django.conf.urls import url
from django.conf.urls import include
from CMSApp import views

urlpatterns = [
    url(r'^$', views.HomePageView.as_view()),
    url(r'^users$', views.user_list.as_view()),
    url(r'^users/(?P<pk>[0-9]+)$', views.user_detail.as_view()),
    url(r'^api-auth/', include('rest_framework.urls',
                                   namespace='rest_framework')),
]

So to login, I use the URL /api-auth/login. When I go to /api-auth/login, I see the DRF login screen. If I type in an incorrect username and password, it says:

Please enter a correct username and password. Note that both fields may be case-sensitive.

and if I type in a correct username and password, it redirects the page to LOGIN_REDIRECT_URL in my settings.py, so this part works.

However, I want to be able to log in without accessing the DRF login page. When the user visits

127.0.0.1/

this view gets called:

class HomePageView(TemplateView):
    template_name = "home.html"

    def get_context_data(self, **kwargs):
            context = super(HomePageView, self).get_context_data(**kwargs)
            return context

And this is my home.html:

<h3>Login</h3>
<form ng-submit="ctrl.loginUser()" name="myLoginForm">
    <div class="form-group">
        <label>Username</label>
        <input type="text" name="uname" class="form-control" ng-model="ctrl.user.username" required> 
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" name="pwd" class="form-control" ng-model="ctrl.user.password" required>
    </div>

    <input type="submit" value="Login"> 
</form>

<script>
angular.module("notesApp", [])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.xsrfCookieName = 'csrftoken';
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    }])

    .controller("MainCtrl", ["$http", function($http) {
    var self = this;
    self.users = {};
    var fetchUsers = function() {
        return $http.get("/CMS/users").then(function(response) { // get list of existing users
            self.users = response.data;
        }, function(errResponse) {
        console.error("Error while fetching users.");
        });
    };

    self.loginUser = function() {
        $http.post("/CMS/api-auth/login/", self.user)
        .error(function(data, status, headers, config) {
            console.log(data);
         })
        .then(fetchUsers);

        console.log("Success Login with ", self.user);
    };
    }]);
</script>

The issue is, if the user puts in an incorrect username and password, "Success login with self.user" appears on the console.log and there is no error message. On top of that, if the user logs in with a correct username and password, the user does not get redirected to LOIGN_REDIRECT_URL. Any idea why?

来源：https://stackoverflow.com/questions/31598792/django-rest-framework-angularjs-not-logging-user-in-or-throwing-errors

标签

angularjs

django

django-rest-framework

django-rest-auth