使用带有Django CSRF保护的angular2 http请求的正确方法是什么？

Question

在Angular1中,可以通过配置$ http-provider来解决问题.喜欢:

app.config(function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'csrftoken';
  $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});

在Angular2中做同样的事情有什么好处？

在Angular2中使用http请求我们需要使用类Http.当然,在每个后期函数调用中添加CSRF-line并不是一个好习惯.

我想在Angular2中我应该创建自己的类来继承Angular2的Http类并重新定义后期函数.这是正确的方法还是有更优雅的方法？

Answer 1

现在已经发布了Angular 2,通过使用,以下似乎是正确的方法CookieXSRFStrategy.

我已经将我的应用程序配置为具有核心模块,但您可以在主应用程序模块中执行相同的操作:

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule }   from '@angular/common';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http';

@NgModule({
    imports: [
        CommonModule,
        HttpModule
     ],
    declarations: [ ],
    exports: [ ],
    providers: [
        {
            provide: XSRFStrategy,
            useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
        }
    ]
})


export class CoreModule {
}, 

Answer 2

Angular2的解决方案并不像angular1那么容易.你需要:

1. 挑出csrftokencookie值.

2. 添加此值以请求具有名称的标头X-CSRFToken.

我提供这个片段:

import {Injectable, provide} from 'angular2/core';
import {BaseRequestOptions, RequestOptions} from 'angular2/http'

@Injectable()
export class ExRequestOptions extends BaseRequestOptions  {
  constructor() {
    super();
    this.headers.append('X-CSRFToken', this.getCookie('csrftoken'));
  }

  getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length == 2) 
      return parts.pop().split(";").shift();
  }
}

export var app = bootstrap(EnviromentComponent, [
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: ExRequestOptions})
]);

Answer 3

Victor K的答案是完全有效的,但是从角度2.0.0-rc.2开始,首选的方法是使用如下的CookieXSRFStrategy,

bootstrap(AngularApp, [
  HTTP_PROVIDERS,
  provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')})
]);