2013-05-21 3 views
14

da http://docs.angularjs.org/api/ng. $ Http, si dice che dovremmo impostare le intestazioni predefinite per includere il token, quindi lo sto seguendo.angular, django e csrf

il mio codice più o meno così

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']). 
    config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){ 
     $routeProvider. 
      when('/', { 
       templateUrl: '/partials/home.html', 
       controller: HomeCtrl 
      }). 
      when('/game/:gameId/shortlist/create',{ 
       templateUrl: '/partials/create-shortlist.html', 
       controller: CreateShortlistCtrl 
      }). 
      otherwise({redirectTo: '/'}); 
    }]); 

myapp.run(function($rootScope, $http, $cookies, $httpProvider){ 
    $http.get('/api/get-current-user').success(function(data){ 
     $rootScope.current_user = data; 
     $rootScope.current_team = $rootScope.current_user.team; 
    }); 
    $http.get('/api/get-current-season').success(function(data){ 
     $rootScope.current_season = data; 
    }); 
    $rootScope.csrf_token = $cookies.csrftoken; 
    console.log($httpProvider.defaults.headers.common); 
    //$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 
}); 

come si può vedere, ho applicato approcci multipli, ma sono in grado di impostare intestazione con CSRF token. i due errori che ho incontrato sono

Uncaught Error: Unknown provider: $httpProviderProvider <- $httpProvider

Che cosa sto facendo di sbagliato?

risposta

21

se si utilizza AngularJS 1.1.3 o più recenti è possibile utilizzare xsrfHeaderName e xsrfCookieName:

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']). 
    config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){ 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    ... 

Vedi $location al punto 1.1.3 della documentazione.

+0

metodo migliore. mentre supera i test unit/e2e con il goniometro – debuggerpk

15

È possibile utilizzare solo $httpProvider nel metodo config. Ma il problema è che non è possibile utilizzare $cookies nel metodo config. È supportato solo $cookiesProvider. Questo è descritto (un po ') nella sezione Module Loading & Dependencies.

Che cosa si può fare è impostare le intestazioni in fase di runtime, come suggerito nella angularjs.org docs

Quindi, per rendere il vostro lavoro esempio, è possibile effettuare le seguenti operazioni:

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']). 
    config(['$routeProvider', function($routeProvider){ 
     $routeProvider. 
      when('/', { 
       templateUrl: '/partials/home.html', 
       controller: HomeCtrl 
      }). 
      when('/game/:gameId/shortlist/create',{ 
       templateUrl: '/partials/create-shortlist.html', 
       controller: CreateShortlistCtrl 
      }). 
      otherwise({redirectTo: '/'}); 
    }]); 

myapp.run(function($rootScope, $http, $cookies){ 
    // set the CSRF token here 
    $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 

    $http.get('/api/get-current-user').success(function(data){ 
     $rootScope.current_user = data; 
     $rootScope.current_team = $rootScope.current_user.team; 
    }); 
    $http.get('/api/get-current-season').success(function(data){ 
     $rootScope.current_season = data; 
    }); 
}); 

E non dimenticare di includere il file angular-cookies.js nel file html!

+1

grazie, questo fa il trucco – debuggerpk