How to pass laravel CSRF token value to vue

Question

I have this form where the user should only type text inside a text area:

            <form action="#" v-on:submit="postStatus">{{-- Name of the method in Vue.js --}}
                <div class="form-group">
                    <textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post"></textarea>
                </div>
                <input type="submit" value="Post" class="form-control btn btn-info">

                {{ csrf_field() }}

            </form>

Then, I have this script code where I am using vue.js with ajax in order to pass that text into a controller and eventually save it into the database:

//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
        },
        http    :   {
            headers: {
                'X-CSRF-Token': $('meta[name=_token]').attr('content')
            }
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                    }
                });
            }
        },
    });

However, this doesn't work so far, since there's this token mismatch exception. I don't know how to make it work. How to pass this token value to the controller. I have tried the following:

1) inside the form, I have added a vue name to the token:

<input type="hidden" name="_token" value="YzXAnwBñC7qPK9kg7MGGIUzznEOCi2dTnG9h9çpB" v-model="token">

2) I have tried to pass this token value into the vue:

//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : '',
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                });
            }
        },
    });

... but in the console, vue doesn't even catch it :(

This leads me to the following error:

TokenMismatchException in VerifyCsrfToken.php line 68:

How do I fix it? Any ideas?

@tam It makes strange things. The form, for example, no longer appears if I put the `@` — Pathros, Oct 09 '16 at 00:06
Without the @, when u inspect the DOM do you see the csrf field? — tam5, Oct 09 '16 at 00:11
@tam Yes, I do see `` which is the output from `{{ csrf_field() }}` — Pathros, Oct 09 '16 at 02:02

Md. Harun Or Rashid · Answer 1 · 2018-03-08T20:39:42.543

51

Very Easy Solution Just add a hidden field inside the form. An Example

<form id="logout-form" action="/logout" method="POST" style="display: none;">
    <input type="hidden" name="_token" :value="csrf">
</form>

Now add csrf variable inside script at the vue file, like this. (Remember, it must be inside data).

<script>
     export default {
        data: () => ({
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          }),        
    }
</script>

N.B. You will see a meta tag in your blade.php file like this.

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

If there is nothing like this, you need to place it there.

edited Mar 08 '18 at 20:39

answered Mar 08 '18 at 20:31

Md. Harun Or Rashid

2,000
4
21
37

I'm currently using this approach and my token is loaded _on every page_ but for some reason I see errors in Bugsnag that my JS doesn't seem to always find the csrf-token meta tag. – Ben Dec 08 '19 at 02:37
5

This doesn't work if you aren't serving any HTML from Laravel in the first place. – Jay Bienvenu Jun 26 '20 at 17:07

score 15 · Answer 2 · answered Oct 30 '18 at 17:42

15

A better way is simply to pass the csrf token via a slot into the vue component.

In blade.php file:

@extends('layouts.app')

@section('content')
          <my-vue-component>
            {{ csrf_field() }}
          </my-vue-component>
@endsection

In MyVueComponent.vue

   <form role="form">
       <slot>
         <!-- CSRF gets injected into this slot -->
       </slot> 
       <!-- form fields here -->
    </form>

answered Oct 30 '18 at 17:42

lukio3

339
3
3

3

This doesn't work if you aren't serving any HTML from Laravel in the first place. – Jay Bienvenu Jun 26 '20 at 17:08

Marcus · Answer 3 · 2017-10-01T14:18:07.210

3

My solution to this is that all vue components get csrf token right before a request is made. I put this in my bootstrap.js file.

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

Then have a class CoolApp.php

    public function getScriptVariables()
    {
      return json_encode([
          'csrfToken' => csrf_token(),
      ]);
    }

edited Oct 01 '17 at 14:18

answered Oct 01 '17 at 14:02

Marcus

1,850
1
12
24

This would be the cleanest way of doing it if you switched `CoolApp.csrfToken;` for `document.querySelector('meta[name="csrf-token"]').getAttribute('content')` – Robert Pounder Apr 30 '19 at 12:49

score 3 · Accepted Answer · edited Jan 31 '18 at 16:05

I solved it thanks to these two answers:

1) First I read this one, which led me to

2) This second one.

So, in my form I keep this:

{{ csrf_field() }}

And inside the js file I only add the following (outside and above the Vue instance):

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

So the whole js code is:

var csrf_token = $('meta[name="csrf-token"]').attr('content');
    /*Event handling within vue*/
    //when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : csrf_token,
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                });
            }
        },
    });

This doesn't work if you aren't serving any HTML from Laravel in the first place. — Jay Bienvenu, Jun 26 '20 at 17:09

Jacopo Pace · Answer 5 · 2017-12-08T13:50:10.727

2

Simply, I would suggest to put this in your PHP file:

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

This way you're able to easily import your csrfToken from the JS part (Vue in this case).

Moreover, if you insert this code in your PHP layout file, you can use the token by any component of your app, since window is a JS global variable.

Source: I got the trick from this post.

edited Dec 08 '17 at 13:50

answered Dec 08 '17 at 13:26

Jacopo Pace

460
7
14

2

This answer works, and is documented but I think the question is implying without a backend serving the Vue.app. For me this answer is not useful for SPAs that are run on Cloud storage/S3. – zeros-and-ones Aug 26 '18 at 05:50
Or are served from Nuxt. – Jay Bienvenu Jun 26 '20 at 17:09

Yassine Qoraiche · Answer 6 · 2021-06-19T12:43:12.637

In case you're using Axios, you can do this easily by: Automatic Axios CSRF token attaching Solution:

first, store the token in an HTML meta tag:

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

Then register the CSRF Token as a common header with Axios so that all outgoing HTTP requests automatically have it attached.

Inside your bootstrapping/main JS file, include:

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');
}

Now you can make requests with csrf attached.

How to pass laravel CSRF token value to vue

6 Answers6

Linked

Related