Laravel CSRF Feld in Vue Komponente

Question

Ich möchte fragen, wie kann ich die csrf_field() in meiner Vue-Komponente hinzufügen. Der Fehler ist

Eigenschaft oder Methode "csrfToken" ist nicht für die Instanz definiert, aber beim Rendern referenziert. Stellen Sie sicher, dass reaktive Dateneigenschaften in der Datenoption deklariert sind.

Hier ist der Code:

<script> 
 
export default { 
 
    name: 'create', 
 
    data: function(){ 
 
    return { 
 
     msg: '' 
 
    } 
 
    }, 
 
    props:['test'] 
 
} 
 
</script>

<template> 
 
    <div id="app"> 
 
    <form action="#" method="POST"> 
 
     {{csrfToken()}} 
 
     <div class="form-group"> 
 
     <label for="name">Name</label> 
 
     <input type="text" id="name" class="form-control"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="location">Location</label> 
 
     <input type="text" id="location" class="form-control"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="age">Age</label> 
 
     <input type="number" id="age" class="form-control"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input type="submit" class="btn btn-default"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</template>

Answer 1

Ich glaube, Sie es so schreiben müssen:

{{ crsf_token() }} 

und nicht wie diese:

{{ csrfToken() }} 

Wenn das nicht funktioniert, vielleicht versuchen, diese:

{!! csrf_token !!} 

Answer 2

Try this:

<script> 
export default { 
    name: 'create', 
    data: function(){ 
    return { 
     msg: '', 
     csrf: window.Laravel.csrfToken 
    } 
    }, 
    props:['test'] 
} 
</script> 

Und in Ihrem Markup verwenden nur

<input type="hidden" name="_token" :value="csrf" />

EDIT

Bit eines Kaninchenlochs aber, ein großes Merkmal von Vue ist, dass es problemlos POST, PATCH, etc. Anfragen mit AJAX und der vue-resource Erweiterung behandeln kann. Anstatt hier eine <form> zu verwenden, können Sie diese Daten mit Ihrer Vue-Komponente verarbeiten. Wenn Sie diese Route verwenden, können Sie Standardheader festlegen, die mit jeder Anforderung gesendet werden, unabhängig davon, um welche Methode es sich handelt. So können Sie immer Ihr CSRF-Token senden.

exports deafult{ 
http: { 
    headers: { 
    'X-CSRF-TOKEN': window.Laravel.csrfToken 
    } 
} 
} 

Answer 3

wenn man sich die /resources/assets/js/bootstrap.js schauen Sie diese Zeilen finden

let token = document.head.querySelector('meta[name="csrf-token"]'); 

if (token) { 
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; 
} else { 
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 
} 

Ich glaube, Sie axios für Ihre Anfragen verwenden. Dies bedeutet, dass Sie in Ihrem Tag

<meta name="csrf-token" content="{{csrf_token}}"> 

hinzufügen müssen.

Answer 4

Wie ich bereits here schrieb, würde ich einfach vorschlagen diese Datei in Ihrem PHP zu setzen:

<script> 
    window.Laravel = <?php echo json_encode(['csrfToken' => csrf_token()]); ?> 
</script> 

Auf diese Weise können Sie sind leicht Ihre csrfToken vom JS Teil (Vue in diesem Fall) importieren . Wenn Sie diesen Code in Ihre PHP-Layout-Datei einfügen, können Sie das Token für jede Komponente Ihrer App verwenden, da window eine JS-globale Variable ist.

Quelle: Ich habe den Trick von this Post.