How to pass laravel CSRF token value to vue

Ensuring the security of your application is a critical step when developing a full-stack application with Laravel and Vue.js. Laravel provides CSRF (Cross-Site Request Forgery) protection out of the box, while Vue is a commonly used frontend framework. Passing the Laravel CSRF token to Vue ensures that every request originating from Vue is secure. Next, I will detail how to achieve this.

Step 1: Setting Up CSRF Token in Laravel

First, ensure that your Laravel application has CSRF protection enabled. Laravel enables CSRF protection by default, and typically includes the VerifyCsrfToken middleware in your middleware stack. Additionally, Laravel automatically stores the CSRF token in each user's session, which can be accessed via the global variable csrf_token().

Step 2: Passing the CSRF Token to the Frontend

When rendering a view, you can directly include the CSRF token in the HTML, allowing Vue to access it. For example, in your main layout file (such as resources/views/layouts/app.blade.php), you can do the following:

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

This embeds the CSRF token within a meta tag, present on every page.

Step 3: Retrieving the CSRF Token in Vue

In your Vue application, you can retrieve the CSRF token value from the meta tag by accessing the DOM. This can be done in your main Vue component or in a separate API service module. For example:

javascript
// Create a utility function to get meta tag content
function getMetaContent(name) {
  const meta = document.querySelector(`meta[name="${name}"]`);
  return meta && meta.getAttribute('content');
}

// Retrieve the CSRF token
const csrfToken = getMetaContent('csrf-token');

Step 4: Attaching the CSRF Token to Request Headers

When sending API requests from Vue (e.g., using axios or fetch), ensure that the CSRF token is included in the request headers. For instance, if you use axios, you can configure it as follows:

javascript
axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;

With this configuration, every request sent using axios will automatically include the CSRF token in the headers.

Summary

By following these steps, you can securely pass the Laravel CSRF token to your Vue application, providing protection against Cross-Site Request Forgery. This method is not only concise but also aligns with modern web development best practices.