我正在开发一个网络应用程序，用户可以登录查看他们的在线wine 窖.
我已经设置好了Django睡觉的模型，以及棱角分明的前端设计，但是我很难把它们组合在一起，我的主要问题是用户身份验证.
我已经阅读了很多关于这里的帖子和各种教程，但是我似乎找不到一种循序渐进的方法来实现身份验证:
据我所知，Angular在一个url上发出POST请求，其中DRF验证用户名和密码是否匹配，并返回令牌或其他身份验证.
我觉得我已经很接近了，但我需要一个更广泛的视角来了解这是如何运作的，才能把这些片段组合在一起.
提前谢谢
我想有很多方法可以做到这一点，让我解释一下我是做什么的，希望这会有帮助.这将是一篇很长的帖子.我很想听听其他人是如何做到这一点的，或者是更好地实现同样的方法.你也可以在Github，Angular-Django-Seed上查看我的SEED项目.
我在Witold Szczerba的http-auth-interceptor中使用令牌身份验证.他的方法的美妙之处在于，无论何时，只要从您的站点发送的请求没有正确的凭据，您都会被重定向到登录屏幕，但您的请求会排队等待登录完成后重新启动.
下面是一个用于登录表单的登录指令.它发布到Django的auth token端点，使用响应令牌设置cookie，使用令牌设置默认头，以便对所有请求进行身份验证，并触发http auth interceptor登录事件.
.directive('login', function ($http, $cookieStore, authService) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.bind('submit', function () {
var user_data = {
"username": scope.username,
"password": scope.password,
};
$http.post(constants.serverAddress + "api-token-auth", user_data, {"Authorization": ""})
.success(function(response) {
$cookieStore.put('djangotoken', response.token);
$http.defaults.headers.common['Authorization'] = 'Token ' + response.token;
authService.loginConfirmed();
});
});
}
}
})
我使用模块.当用户访问站点时，运行方法设置cookie判断，如果他们设置了cookie，我将设置默认授权.
.run(function($rootScope) {
$rootScope.$broadcast('event:initial-auth');
})
下面是我的拦截器指令，它处理authService广播.如果需要登录，我会隐藏所有内容并显示登录表单.否则，隐藏登录表单并显示其他所有内容.
.directive('authApplication', function ($cookieStore, $http) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var login = elem.find('#login-holder');
var main = elem.find('#main');
scope.$on('event:auth-loginRequired', function () {
main.hide();
login.slideDown('fast');
});
scope.$on('event:auth-loginConfirmed', function () {
main.show();
login.slideUp('fast');
});
scope.$on('event:initial-auth', function () {
if ($cookieStore.get('djangotoken')) {
$http.defaults.headers.common['Authorization'] = 'Token ' + $cookieStore.get('djangotoken');
}
else {
login.slideDown('fast');
main.hide();
}
});
}
}
})
要使用它，我的html基本上是这样的.
<body auth-application>
<div id="login-holder">
... login form
</div>
<div id="main">
... ng-view, or the bulk of your html
</div>