在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类并重新定义后期函数.这是正确的方法还是有更优雅的方法?
现在已经发布了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 { },
Angular2的解决方案并不像angular1那么容易.你需要:
挑出csrftoken
cookie值.
添加此值以请求具有名称的标头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}) ]);
Victor K的答案是完全有效的,但是从角度2.0.0-rc.2开始,首选的方法是使用如下的CookieXSRFStrategy,
bootstrap(AngularApp, [ HTTP_PROVIDERS, provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')}) ]);