Csrf token in vue component

Question

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?

Yaser Khahani · Accepted Answer · 2017-10-29 11:57:09Z

14

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>

answered Oct 29, 2017 at 11:57

Yaser Khahani

7057 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yaser Khahani Over a year ago

In these ways, you don't need to define a global variable and increase the complexity of your code :)

Murad · Accepted Answer · 2020-05-04 21:29:55Z

10

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>

edited May 4, 2020 at 21:29

answered May 4, 2020 at 21:24

Murad

1,19019 silver badges13 bronze badges

1 Comment

seddka Over a year ago

I have been frustrated with csrf token, and have tried many ways but yours did the trick for me! thank you sir, you saved my day!

SAIF ALI · Accepted Answer · 2018-09-27 10:50:53Z

3

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']

   }

answered Sep 27, 2018 at 10:50

SAIF ALI

717 bronze badges

Comments

Rwd · Accepted Answer · 2017-01-02 14:51:58Z

1

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!

answered Jan 2, 2017 at 14:51

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

4 Comments

schel4ok Over a year ago

I have this all. But I think that I have to add {!! csrf_field() !!} in every form. Isn't it?

Rwd Over a year ago

You would only have to add it to each form if you're not going to be submitting it with Vue, otherwise it will always automatically added to the request.

schel4ok Over a year ago

I have my form submitting with vue. Why I dont need to add csrf_field in this case?

Rwd Over a year ago

...because with the above code it's going to be added as a header in every request.

koalaok · Accepted Answer · 2017-08-08 14:00:55Z

0

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>

answered Aug 8, 2017 at 14:00

koalaok

5,85012 gold badges63 silver badges96 bronze badges

Comments

Eslam Abdallah Abass · Accepted Answer · 2021-07-28 05:20:31Z

0

Make a token then assign it

<script>
export default {
    data() {
        return {
            token: '',

        }
    },
 async created() {
        this.token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
</script>

I was using Iview so I used it like that

:headers="{'x-csrf-token' : token}"

But normally you will use

v-bind:value="token"

answered Jul 28, 2021 at 5:20

Eslam Abdallah Abass

35 bronze badges

Collectives™ on Stack Overflow

Csrf token in vue component

6 Answers 6

1 Comment

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related