How to authenticate Vue.js / Axios request of an API route in Laravel
Stefan Bogdanescu
Founder & Senior Architect · 2026-06-29
# How to Authenticate Vue.js / Axios Requests of an API Route in Laravel
Dealing with authentication discrepancies between a traditional web session and modern API token requirements is a very common hurdle when building decoupled applications using Laravel. You are running into a classic conflict: your web login relies on stateful session cookies, while your API routes enforce stateless token-based guards.
As a senior developer, I can tell you that the solution rarely involves spoofing tokens; it usually involves correctly configuring how your frontend communicates with the backend, respecting Laravelâs built-in security mechanisms.
## The Conflict: Session vs. Token Guards
The issue you are experiencing stems from the difference between how Laravel handles authentication guards:
1. **Session Authentication (Web):** When a user logs in via a Blade template, Laravel sets session cookies. Browsers automatically send these cookies with subsequent requests to the same domain, establishing the session state.
2. **API Authentication (`auth:api` guard):** Guards like `auth:api` are typically configured to expect an authentication token (like a Bearer token from Sanctum or Passport) sent in the `Authorization` header of every request.
When you switch from testing routes (where middleware is disabled) to routes protected by `auth:api`, Laravel expects a token. Since your standard session cookies are not automatically translated into API tokens, the request fails with a 401 Unauthorized error because no valid token was provided in the expected header.
## Solution 1: Leveraging Session Cookies for API Access (The State-Aware Approach)
If you specifically need to leverage existing session authentication for your API endpoints (often suitable for internal applications or when tightly coupling the frontend and backend), you must ensure that Axios is configured to send these cookies.
When your Vue application is served from a different origin than your Laravel API, this requires careful setup regarding CORS and cookie handling. However, if the Vue app and Laravel are on the same domain (or subdomain), the browser handles the session cookie transmission automaticallyâAxios needs no extra configuration beyond standard setup.
If you are using sessions for API access, ensure your routes are properly secured to handle cookies rather than expecting a header token:
```php
// Example route definition in Laravel
Route::middleware('web')->group(function () {
Route::get('/user-data', function (Request $request) {
// Access the authenticated user via the session
return $request->user();
});
});
```
For this to work seamlessly, you must ensure that your CORS configuration permits the necessary credentials, allowing the browser to send the session cookie. This approach keeps the authentication state managed by Laravel's session system rather than external tokens.
## Solution 2: The Recommended Path â Token-Based Authentication (Sanctum)
For modern, decoupled applications involving a Vue frontend and a Laravel API, the industry best practice is almost always to use token-based authentication, specifically **Laravel Sanctum**. This provides stateless security, which scales far better and isolates your API from session management concerns.
Instead of relying on session cookies for API requests, you should implement Sanctum to issue an API token upon successful login. Your Vue/Axios client then stores this token and includes it in the `Authorization` header of every subsequent request.
### Implementation Steps:
1. **Install Sanctum:** Ensure Laravel Sanctum is installed and configured correctly.
2. **Login Endpoint:** Modify your login route to return a Sanctum token upon successful authentication, instead of relying solely on session management for API access.
3. **Axios Configuration:** Configure your Axios instance in Vue to attach this token to requests.
In your Vue/Axios setup, this looks like:
```javascript
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://your-laravel-api.test/',
withCredentials: true // Important if using cookies alongside tokens
});
// Interceptor to attach the token received after login
apiClient.interceptors.request.use(config => {
const token = localStorage.getItem('sanctum_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
export default apiClient;
```
This approach aligns perfectly with how Laravel is designed for API development, making your application more robust and easier to manage, as discussed in official Laravel documentation regarding API security setup on **laravelcompany.com**.
## Conclusion
To resolve your 401 error, stop trying to force session authentication into a token-based API guard. The cleanest solution is to adopt the stateless paradigm: use Laravel Sanctum to issue tokens upon login, and configure your Vue/Axios client to send these Bearer tokens in the request headers. This separation provides better security, clearer state management, and aligns with modern architectural patterns for building robust APIs on Laravel.