¿Cómo enviar csrf_token () dentro del formulario AngularJS usando la API de Laravel?

Solución:

Una opción será inyectar el token CSRF como una constante. Agregue lo siguiente en su etiqueta de cabeza:

<script>
  angular.module("app").constant("CSRF_TOKEN", '{{ csrf_token() }}');
</script>

Luego, en los métodos de su módulo, se puede inyectar cuando sea necesario.

app.factory("FooService", function($http, CSRF_TOKEN) {
    console.log(CSRF_TOKEN);
};

Tal vez le interese echar un vistazo al código fuente de este proyecto de muestra de Laravel + AngularJS.

la solución aceptada por Rubens Mariuzzo funciona, sin embargo creo que he encontrado una solución alternativa que creo que es mejor.

De esta manera, no tiene que pasar datos del script html a su aplicación angularjs y hay una mejor separación de preocupaciones. Por ejemplo, esto le permite tener su aplicación Laravel como solo una API.

Mi solución implica obtener el token CSRF a través de una solicitud de API y establecer este valor como una constante.

Además, en lugar de inyectar el token CSRF cuando sea necesario, configura el token en un encabezado predeterminado que el servidor verificaría en cualquier solicitud http de API.

El ejemplo muestra laravel, sin embargo, cualquier marco serio debería poder ofrecer algo similar.

Ruta CSRF en LARAVEL:

// Returns the csrf token for the current visitor's session.
Route::get('api/csrf', function() {
    return Session::token();
});

Protección de rutas con before => 'api.csrf' Filtrar

// Before making the declared routes available, run them through the api.csrf filter
Route::group(array('prefix' => 'api/v1', 'before' => 'api.csrf'), function() {
Route::resource('test1', 'ApiV1Test1Controller');
Route::resource('test2', 'ApiV1Test2Controller');
});

los api.csrf filtrar

// If the session token is not the same as the the request header X-Csrf-Token, then return a 400 error.
Route::filter('api.csrf', function($route, $request)
{
if (Session::token() != $request->header('X-Csrf-Token') )
{
    return Response::json('CSRF does not match', 400);
}
});

Las cosas de AngularJS ponen esto en app.js:

Versión de bloqueo:

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "//" + window.location.hostname + "/api/csrf", false);
xhReq.send(null);

app.constant("CSRF_TOKEN", xhReq.responseText);

app.run(['$http', 'CSRF_TOKEN', function($http, CSRF_TOKEN) {    
    $http.defaults.headers.common['X-Csrf-Token'] = CSRF_TOKEN;
}]);

Versión sin bloqueo

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "//" + window.location.hostname + "/api/csrf", true);

xhReq.onload = function(e) {
  if (xhReq.readyState === 4) {
    if (xhReq.status === 200) {
      app.constant("CSRF_TOKEN", xhReq.responseText);

      app.run(['$http', 'CSRF_TOKEN', function($http, CSRF_TOKEN) {
        $http.defaults.headers.common['X-Csrf-Token'] = CSRF_TOKEN;
      }]);
    }
  }
};

xhReq.send(null);

Ahora, la constante CSRF_TOKEN se inyecta como un encabezado en TODAS las solicitudes http de la aplicación AngularJS y TODAS las rutas de la API están protegidas.

Si usa Laravel 5, no hay necesidad para agregar el token CSRF a los encabezados http angulares.

Laravel 5 con Angular hace esto automáticamente por ti.

http://laravel.com/docs/5.1/routing#csrf-x-xsrf-token

---

---

Utiliza Nuestro Buscador