Level 18
Csrf token exist by default on either the bootstrap.js or app.js file. You dont have to explicitly add it on any vue component.
1 like
Sep 30, 2020
5
Level 4
Laravel CSRF Token in Vue
I haven't found a standard/definitive solution for handling the Laravel CSRF token in Vue components and wanted to see what other solutions people have come up with.
My best solution so far is to create a global component and then wherever I need the CSRF token I add <csrf-token-input />
<!-- components\CSRFTokenInput.vue -->
<template>
<input type="hidden" name="_token" :value="csrf">
</template>
<script>
/**
* Laravel CSRF Token hidden input.
*
* The following is required in the header of the blade file responsible for containing the HTML header info:
* <meta name="csrf-token" content="{{ csrf_token() }}">
*/
export default {
created() {
if (! this.csrf) {
console.warn('The CSRF token is missing. Ensure that the HTML header includes the following: <meta name="csrf-token" content="{{ csrf_token() }}">');
}
},
data() {
return {
csrf: document.head.querySelector('meta[name="csrf-token"]') ? document.head.querySelector('meta[name="csrf-token"]').content : '',
}
},
}
</script>
Does anyone have any solutions that may be better? If not, do you have any suggestions to improve this solution?
Thanks!
Level 1
@rameezisrar Thanks! It still works with Laravel 9 + Vue 3
1 like
Level 4
@rameezisrar OK, I found this in my bootstrap.js file.
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
let user_token = $('meta[name="user-token"]').attr('content');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Authorization'] = `Bearer ${user_token}`;
My top nav is a Vue component and I have a logout button on it.
<form id="logout-form" :action="route('logout')" method="POST" style="display: none;">
<csrf-token-input />
</form>
It was originally in a blade template.
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
If I remove the <csrf-token-input /> component, it fails to log out. Any idea what I would be missing. I'd rather not have to use a component to handle the CSRF token if there's already something in place.
I'm wondering if the user_token in bootstrap.js is causing conflicts? I'm working with others on this project, so I'm not sure exactly what that is for.
Level 4
Looking at the code a bit more, I'm thinking if I wanted to take advantage of the CSRF token that exists by default, I'd need to rework the logout form to use Axios? Otherwise, I'm assuming I'd still need to ensure the hidden input field is there?
Level 18
Just send a post request to the url 'logout' not to 'api/logout'and it will work just fine without the need to explicitly include CSRF token
Please or to participate in this conversation.