最简单的带有会话身份验证的AngularJS应用程序
我已经用头撞墙太久了，试图让会话身份验证在AngularJS中使用基本的Django REST框架设置。我已经在博客中读过几十个堆叠溢出的问题和答案，而我就是不明白。我有一个正在开发的大型应用程序，但是为了方便这个问题的解决，我在基本的Django框架教程代码这里的基础上开发了一个极简主义的这里应用程序。(所有前端依赖项都包含在叉中。)只需做pip install -r requires.txt，python manage.py makemigrations snippets，python manage.py migrate，然后python manage.py runserver。
主要的利益守则如下：
"use strict";
var geoint = angular.module('snippets', [
'ngRoute',
'ngCookies',
'ngAnimate',
'ngResource',
'snippets.controllers',
])
.config(function ($routeProvider, $httpProvider) {
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$routeProvider
.when('/', {
title:'Snippets - Home',
templateUrl: STATIC_URL + 'snippets/partials/snippets.html',
controller: 'SnippetsCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.run(function($rootScope, $location, $http) {
// Get a CSRF Token
$http.get('api/auth/login/?next=/api/').then(
function successCallback(response){
console.log(response);
// Post should come back with Set-Cookie sessionid, but it doesn't!
$http.post('api/auth/login/', {username:'username', password:'password'}).then(
function successCallback(response){
console.log(response);
// Get this user's information
$http.get('api/currentuser/').then(
function successCallback(response){
console.log(response);
})
})
},
function errorCallback(response){
alert(response);
}
);
});<!DOCTYPE html>
<html lang="en" ng-app="pc2">
{% load static from staticfiles %}
<head>
<meta charset="UTF-8">
<title ng-bind="title">PC2</title>
<script>var STATIC_URL = "{% static "" %}";</script>
<link rel="stylesheet" type="text/css" href="{% static "resources/css/complete.min.css" %}">
{% if debug %}
<script src="{% static "resources/js/_bower.js" %}"></script>
<script src="{% static "resources/js/app.js" %}"></script>
<script src="{% static "resources/js/controllers.js" %}"></script>
<script src="{% static "resources/js/directives.js" %}"></script>
<script src="{% static "resources/js/filters.js" %}"></script>
<script src="{% static "resources/js/services.js" %}"></script>
{% else %}
<script src="{% static "resources/js/complete.min.js" %}"></script>
{% endif %}
</head>
<body>
{% load static from staticfiles %}
<div ng-include="'{% static "resources/partials/navbar.html" %}'"></div>
<div ng-view class="container-fluid main-view"></div>
</body>
</html>
我的嵌套GET和POST很难看，显然我不会在应用程序中真正做到这一点。但我认为它应该有效，但它不起作用。我一直在用邮递员和铬来解决问题。问题的根源似乎是，当我使用AngularJS时，POST没有返回包含sessionid的Set-Cookie。(当我使用浏览器时，它会这样做。)因此，当它试图获取用户信息时，它没有设置cookie，而是作为一个AnonymousUser进入Django。任何人能提供的任何帮助都是非常感谢的！
所以问题是，为什么不能在AngularJS中工作，但是它可以在浏览器中工作呢？，我也希望对最佳实践的输入，或者解决这个问题的更好的方法。(新的DRF端点，使用$resource等)？
回答 1
Stack Overflow用户
发布于 2017-03-22 13:10:32
好吧，今天早上我在这个问题上做了更多的周旋之后，我得到了答案。对于DRF默认api登录视图，数据必须作为表单提交。因此，这最终是解决方案：
.run(function($rootScope, $location, $http) {
$http.get('api/auth/login/').then(function successCallback(response){
console.log(response);
$http({
"method": "POST",
"url": 'api/auth/login/',
"data": $.param({username:'username', password:'password', next:'/api/currentuser'}),
"headers": {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(
function successCallback(response){
console.log(response);
})})})；
我仍然非常有兴趣学习“正确”的方法来做到这一点。我应该构建一个独立的DRF登录视图吗？我应该使用角$resource而不是$http调用吗？我将感谢任何和所有的投入。
https://stackoverflow.com/questions/42941424
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号