在 Angular 2 中获取 X-CSRF-TOKEN

Question

我在 Angular 2 中使用 X-CSRF-TOKEN 的标准方式，就像在我的 app.module:

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

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

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

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

Answer 1

您可以通过以下代码获取您的令牌

document.cookie

Answer 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"));
    }
}

Answer 3

像这样使用HttpXsrfTokenExtractor：

export class MyComponent {

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

在 Angular 2 中获取 X-CSRF-TOKEN

Get X-CSRF-TOKEN in Angular 2

angular

token

csrf

primeng

x-xsrf-token