Csrf-token in vue-Komponente

Habe ich Laravel 5.3 Projekt mit Vue.js integriert und ich will CSRF-TOKEN in meine form. Formular-html-code ist in Vue-Komponente-Datei in

resources /assets /js /bootstrap.js

Habe ich dieses:

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', MyApp.csrfToken);
    next();
});

dann habe ich Haupt-vue-Datei /resources/assets/js/app.js:

require('./bootstrap');
Vue.component('callbackwindow', require('./components/callbackwindow.vue'));

const app = new Vue({
    el: '#app',
    data: { },
});

dann in Vue-Datei muss ich verwenden csrf_field, aber ich weiß nicht, wie um es dort zu bekommen, weil die standard-php - csrf_field() ist nicht gerendert innen Vue-Komponente und ich weiß nicht, wie zu importieren MyApp.csrfToken.

<template>
<div class="modal fade" >
    <form @submit.prevent="submitForm" name="callback" method="POST" action="/" role="form" class="form-horizontal" enctype="multipart/form-data">
    {!! csrf_field() !!}
    ...form code here...
    </form>
</div>
</template>
<script>
    export default {    }
</script>

Ist es möglich, zu importieren MyApp.csrfToken variable aus hier in meinem Vue template-Datei?

InformationsquelleAutor schel4ok | 2016-12-31

6

Als alternative Möglichkeiten:

1 - Holen Sie sich die token von meta-tag mit csrf-token Namen in der <head>:
```
$('meta[name="csrf-token"]').attr('content')
```
2 - Pass es als requisite, um Ihre Vue-Komponente:
```
<your-component :csrf-token="{{ csrf_token() }}"></your-component>
```
Auf diese Weise brauchen Sie nicht, um eine Globale variable und erhöht die Komplexität des Codes 🙂

InformationsquelleAutor YaserKH

Tun dies in blade:

<Example-component csrf="{{csrf_token()}}"></Example-component>

Tun dies in Vue-Komponente:

In form
<input type="hidden" name="_token" v-bind:value="csrf">
In Script
export default {
        props: ['csrf', 'oldName']

   }

InformationsquelleAutor SAIF ALI

0

Einen Weg, den Sie definieren könnte, Sie csrf-token wäre, fügen Sie Folgendes zu Ihrer head Abschnitt Ihrer main blade-Datei:
```
<script>
    var MyApp = {
        csrfToken: "{{ csrf_token() }}"
    }
</script>
```
Alternativ könntest du den import so etwas wie die cookie Bibliothek und nutzen Sie die xsrf token statt.

mit npm:
```
npm install cookie
```
mit Garn:
```
yarn add cookie
```
Dann in Ihre bootstrap.js Datei:
```
import cookie from "cookie";


Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-XSRF-TOKEN', cookie.parse(document.cookie)['XSRF-TOKEN']);
    next();
});
```
Hoffe, das hilft!

Ich habe diese alle. Aber ich denke, dass ich hinzufügen, {!! csrf_field() !!} in jeder form. Ist es nicht?
Sie möchte nur noch hinzufügen, dass es zu jeder form, wenn du nicht gehst, werden Sie es senden mit Vue, sonst wird es immer automatisch dem Auftrag Hinzugefügt.
Ich habe mein Formular Absenden mit vue. Warum ich nicht brauchen, um hinzuzufügen, csrf_field in diesem Fall?
...weil mit dem obigen code, es wird Hinzugefügt werden, sobald ein header in jeden request.

InformationsquelleAutor Ross Wilson

Ich hatte dasselbe Problem, und ich löste wie dieser. Ich bin nicht sehr stolz, denn ich mache schmutzige globalen Bereich

Durch hinzufügen der folgenden:

in app.blade.php

<script>
 var Laravel = {
            'csrfToken' : '{{csrf_token()}}'
        };

in meinem was auch immer Komponente/untergeordnete Komponente MyComponent.vue:

<form method="POST" action="/my/path" class="pull-right">
    <input type="hidden" name="_token" :value="csrf">       
    <input class="btn" type="submit" value="Modify" />
</form>


<script>
    export default{
        data() {
            return {
                csrf: "",
            }
        },
        mounted() {
            this.csrf = window.Laravel.csrfToken;
        }
    }
</script>

InformationsquelleAutor koalaok

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.