How to handle CSRF protection in Vue.js with Laravel Sanctum

Cross-Site Request Forgery (CSRF) protection is important to prevent unauthorized actions on behalf of a user. When working with Vue.js and Laravel Sanctum, you can handle CSRF protection by following these steps:

1. Configure Laravel Sanctum: Make sure you have Laravel Sanctum installed and configured in your Laravel project. You can install it using Composer:

   bashCopy code
   composer require laravel/sanctum
   

   Follow the setup instructions in the official documentation to configure Sanctum: Laravel Sanctum Documentation

2. Enable CSRF Protection in Laravel: In your Laravel project, ensure that CSRF protection is enabled. Laravel Sanctum uses Laravel's built-in CSRF protection. Make sure your routes are using the web middleware group, which includes the CSRF middleware.

3. Include CSRF Token in Vue.js Requests: In your Vue.js application, you need to include the CSRF token in your requests. Laravel automatically includes the CSRF token in the default Blade views, but in a Vue.js application, you need to manually add it to your requests.

   You can get the CSRF token from Laravel and include it in the headers of your Axios requests. Here's an example:

   javascriptCopy code
   // Import Axios in your Vue component
   import axios from 'axios';
   
   // Get the CSRF token from a meta tag in your Blade layout
   const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
   
   // Set the CSRF token in the Axios headers
   axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;
   
   // Now you can make your requests using Axios
   axios.post('/api/your-endpoint', data)
      .then(response => {
         // Handle the response
      })
      .catch(error => {
         // Handle errors
      });
   

   Ensure that you replace /api/your-endpoint with the actual endpoint you want to communicate with.

4. Test Your Setup: Make sure to thoroughly test your setup to ensure that the CSRF protection is working correctly. Perform actions that would trigger POST, PUT, or DELETE requests and check for any CSRF-related errors.

By following these steps, you can integrate CSRF protection into your Vue.js application that interacts with a Laravel Sanctum API. Always keep your dependencies and packages up to date and follow best practices for security to ensure a robust and secure application.