Csrf token in vue component

问题

I have Laravel 5.3 project with Vue.js integrated and I want to use CSRF-TOKEN in my form. Form html code is in Vue component file in

resources / assets / js / bootstrap.js

I have this:

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

then I have main vue file /resources/assets/js/app.js:

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

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

then in Vue file I need to use csrf_field, but I don't know how to get it there, because standard php csrf_field() is not rendered inside Vue component and I don't know how to import 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>

Is it possible to import MyApp.csrfToken variable from here into my Vue template file?

回答1:

As an alternative ways:

1- Get the token from meta tag with csrf-token name inside of <head>:

$('meta[name="csrf-token"]').attr('content')

2- Pass it as a prop to your Vue component:

<your-component :csrf-token="{{ csrf_token() }}"></your-component>

回答2:

Do this in blade:

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

Do this in Vue Component:

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

   }

回答3:

One way you could define you csrf token would be to add the following to your head section of your main blade file:

<script>
    var MyApp = {
        csrfToken: "{{ csrf_token() }}"
    }
</script>

Alternatively, you could use import something like the cookie library and use the xsrf token instead.

with npm:

npm install cookie

with yarn:

yarn add cookie

Then in your bootstrap.js file:

import cookie from "cookie";


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

Hope this helps!

回答4:

I had same Issue and I solved like this. I'm not very proud because I'm making dirty the global scope

By adding the following:

in app.blade.php

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

in my whatever component/child component 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>

回答5:

If you have written meta tags for csrf token in the master template then try this.

<template>
      <form action = "/user/checkout" method="POST">
        <input type="hidden" name="_token" v-bind:value="csrf">
       ....
      </form>
</template>

In the script tag of the component:

 <script>
    export default{

        data(){
          return {
            //csrf token
             csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
       }
    }

    </script>

来源：https://stackoverflow.com/questions/41409893/csrf-token-in-vue-component

标签

php

Vue.js

laravel-5.3

csrf

vuejs2