how to use laravel csrf token inside vuejs component

Question

I am trying to use a form inside vue component. the problem is that it does not accept my csrf token. I have tried to add it multiple ways, using

{{!! csrf_field()!!}} // the component does not render after this

then i tried to add xcsrf

blade.php


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

then adding this to script

 $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
}); //this gives error token mismatch

then i tried adding xcsrf to the mount function like this

mounted() {
        this.csrf = window.laravel.csrfToken        
    } // I get the error csrfToken of undefined

here is my code app.js

//new vue component 
Vue.component('search', require('./components/Searchnames.vue'));

component.vue

<template>
    <div class="row">
        <form class="col-md-12" action='/table' method="POST">

        <input type="hidden" name="_token" :value="csrf">
            <h1 class="mainheading">
                I have found the following names matching your search
            </h1>
            <br/>
            <br/>
            <br/>
            <div class='names_container' v-for="name in names">
                <button class=" btn-default btn-block glow-border names" type='submit' v-on:click="getName">
                {{name.label.eng}}
                </button>

            </div>

        </form>
    </div>

</template>


<script>
  export default {
        data: function () {
            return {
                names: [],
                selected: "",
                csrf: ""
            };

        },
        methods: {
            getData: function () {
                let self = this;
                self.$http.jsonp(url, {
                        jsonpCallback: "JSON_CALLBACK"
                    })
                    .then(response => {
                        response.body.map(function (obj) {
                            if (obj.type == 'org') {
                                self.names.push(obj)
                            }

                        });
                        console.log(JSON.stringify(this.names))
                    })
            },
            getName: function (element) {
                this.selected = element.target.innerText
            }
        },
        mounted: function () {
            this.csrf = window.laravel.csrfToken ;
            this.getData();


        }
    }
</script>

blade.php template

@section('content')
     <div>
         <search></search>
         </div>   
    @endsection

    <script>
        var url = '{{ $url }}'.replace(/&amp;/g, '&');
    </script>

<form method="POST" action="/profile"> {{ csrf_field() }} ... </form> — RïshïKêsh Kümar
– RïshïKêsh Kümar, Commented Jun 14, 2017 at 12:52
it does not work i gt this error Property or method "csrf_field" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. found in — Imi
– Imi, Commented Jun 14, 2017 at 12:56

Alex Mac · Accepted Answer · 2017-06-14 13:07:01Z

2

try this

Vue.http.interceptors.push(function (request, next) {
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
next();
});

then try this or add it to your app.blade.php header:

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

edited Jun 14, 2017 at 13:07

answered Jun 14, 2017 at 12:53

Alex Mac

9201 gold badge7 silver badges21 bronze badges

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

4 Comments

Imi Over a year ago

Thanks the second option works but then I get TokenMismatchException at /table page

Alex Mac Over a year ago

That means the tokens don't match. Try clearing cache or refreshing the page/request. Is it in your header shared by all your views?

Imi Over a year ago

csrf token you mean? yes it is in the app.blade.php which is shared by all views

Alex Mac Over a year ago

refer to this laracasts.com/discuss/channels/vue/…

Collectives™ on Stack Overflow

how to use laravel csrf token inside vuejs component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related