Угловой 2: добавить параметр csrf в noNgForm

Question

Сегодня возникла проблема с отправкой формы из html-шаблона на угловом SPA. Прежде всего простая форма с submit не работает из коробки, так как угловые ловит событие отправки, которое не дает формы для отправки.

<form action="/api/connect/facebook" method="POST"> 
     <input type="hidden" name="scope" value="email" /> 
     <button type="submit" class="btn btn-primary btn-block"><i class="icon-facebook"></i> &nbsp;&nbsp;&nbsp;Login via Facebook</button> 
    </form> 

Для того, чтобы угловой игнорировать это, и пусть ваш браузер, чтобы сделать запись, вы должны добавить ngNoForm заголовок:

<form ngNoForm action="/api/connect/facebook" method="POST"> 
     <input type="hidden" name="scope" value="email" /> 
     <button type="submit" class="btn btn-primary btn-block"><i class="icon-facebook"></i> &nbsp;&nbsp;&nbsp;Login via Facebook</button> 
    </form> 

Это может быть не очень часто для SPA, так как такая форма представить будет перемещаться браузер прочь от SPA, однако это то, что мне нужно.

Хорошая вещь. Я использую пружинный ботинок в качестве моего бэкэнда, поэтому с пружинной защитой у него хорошая защита csrf и cors, не позволяющая мне отправить форму. Я получаю исключение:

Invalid CSRF маркер «нулевой» был найден в параметре запроса «_csrf» или заголовка «X-CSRF-токен»

Итак, вопрос заключается в том, чтобы обеспечить значение csrf для углового шаблона?

Answer 1

Я нашел хороший пример того, как это делается в рамках JHipster. Три вещи необходимы:

1. angular2-печенье плагин
2. CSRFService
3. Добавить скрытые параметров в виде

Добавление angular2-печенья плагин так просто, как:

npm install angular2-cookie --save 

Однако вам нужно будет добавить все необходимые сопоставления в SystemJS или любой другой модуль f который вы используете. Для SystemJS все объясняется довольно приятным here. Прочитайте его внимательно, потому что первый раз, когда я забыл сделать:

import { CookieService } from 'angular2-cookie/services/cookies.service'; 

@NgModule({ 
    providers: [ CookieService ], 
}) 
export class AppModule { } 

Теперь CSRFService:

import { Injectable } from '@angular/core'; 
import { CookieService } from 'angular2-cookie/core'; 

@Injectable() 
export class CSRFService { 

    constructor(private cookieService: CookieService) {} 

    getCSRF(name?: string) { 
     name = `${name ? name : 'XSRF-TOKEN'}`; 
     return this.cookieService.get(name); 
    } 
} 

Теперь вам нужно вводить его в компонент, который делает шаблон:

import {Component, OnInit} from '@angular/core'; 
import {CSRFService} from './csrf.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'login-form', 
    templateUrl: 'login.component.html', 
    styleUrls: ['login.component.css'] 
}) 
export class LoginComponent implements OnInit { 

    private csrf: string; 

    constructor(private csrfService: CSRFService) { } 

    ngOnInit() { 
     this.csrf = this.csrfService.getCSRF(); 
    } 
} 

И, наконец, не забудьте добавить скрытый параметр в форму в login.component.html:

<form ngNoForm action="/api/connect/facebook" method="POST"> 
    <input name="_csrf" type="hidden" value="{{ csrf }}"/> 
    <input type="hidden" name="scope" value="email" /> 
    <button type="submit" class="btn btn-primary btn-block"><i class="icon-facebook"></i> &nbsp;&nbsp;&nbsp;Login via Facebook</button> 
</form> 

Надеюсь, это помогает кому угодно, потому что я потратил половину дня, пытаясь понять, как добиться того, чего я хочу.