在 Angular 2 中获取 X-CSRF-TOKEN答案

【问题标题】：Get X-CSRF-TOKEN in Angular 2在 Angular 2 中获取 X-CSRF-TOKEN
【发布时间】：2017-06-24 14:37:49
【问题描述】：

我在我的 app.module 中使用像这样在 Angular 2 中使用 X-CSRF-TOKEN 的标准方式：

provide: XSRFStrategy, useValue: new CookieXSRFStrategy('CSRF-TOKEN', 'X-CSRF-TOKEN')

我正在使用“primeng”进行文件上传。我需要像这样自己设置令牌：

private onBeforeSend(event) {
     event.xhr.setRequestHeader("X-CSRF-TOKEN", tokenThatINeed);
}

我需要 Angular2 为我生成的令牌。我不知道如何访问令牌。

【问题讨论】：

标签： angular token csrf primeng x-xsrf-token

【解决方案1】：

像这样使用HttpXsrfTokenExtractor：

export class MyComponent {

    constructor(csrfTokenExtractor: HttpXsrfTokenExtractor) {
        console.log(csrfTokenExtractor.getToken());
    }
}

【讨论】：

【解决方案2】：

所以，我遇到了类似的问题，并使用了第 3 方 JavaScript 库来解决问题。有几个不同的，但我使用了angular2-cookie。一旦你将服务注入到你的组件中，它就非常简单了。这是我的代码最终的样子：

import {CookieService} from "angular2-cookie/core";

@Component({
    selector: 'fileUpload',
    templateUrl: 'app/components/files/fileUpload.html',
    providers: [CookieService]

})

export class FileUploadComponent {
    uploadUrl:string;

    constructor(private propertyService:PropertyService,
                private cookieService:CookieService){

        this.uploadUrl = propertyService.getProperties().server_location + "/files/upload"
    }

    onBeforeSend(event:any){
        event.xhr.open("POST", this.uploadUrl, true);
        event.xhr.setRequestHeader("X-XSRF-TOKEN", this.cookieService.get("XSRF-TOKEN"));
    }
}

【讨论】：

【解决方案3】：

您可以使用以下代码获取您的令牌

document.cookie

【讨论】：