Laravel 9 + Passport +Vuejs 401 Unauthorized

Question

Im using laravel as my backend and vue as my front end and im also using passport to secure the API. I can login and logout succesfully but if I make any other API call I get 401 Unauthorized

Response

this is my api.php

Route::post('login', [AuthController::class, 'login']);
//Auth
Route::middleware('auth:api')->group(function () {
Route::post('logout', [AuthController::class, 'logout']);
Route::get('users/me', [UserController::class, 'show_me']);

//USER
Route::post('user/register', [UserController::class, 'register']);
Route::get('users', [UserController::class, 'index']);
Route::post('user/create', [UserController::class, 'store']);
Route::delete('users/{user}', [UserController::class, 'destroy']);
Route::put('users/{user}/block', [UserController::class, 'handleBlock']);
Route::get('user/{id}', [UserController::class, 'find']);
Route::post('update/{id}', [UserController::class, 'update'])
->middleware('can:update,user');

//CUSTOMER
Route::get('customers', [CustomerController::class, 'index']);

//ORDERS
Route::get('orders', [OrderController::class, 'index']);
Route::get('readyOrders', [OrderController::class, 'readyOrders']);

//ORDER_ITEMS
Route::get('order_items', [OrderItemController::class, 'index']);

//PRODUCTS
Route::get('products',[ProductController::class, 'index']);
Route::delete('products/{product}',[ProductController::class, 'destroy']);
Route::get('paginatedProducts',[ProductController::class, 'paginate']);
Route::post('product/create',[ProductController::class, 'store']);
});

When calling /users/me

Response on calling /users/me

It contains the Authorization header as it is supposed to.

Route list

Route list

I don't know what Im doing wrong and its very strange that I can access logout and show_me but not the other routes.

Answer 1

I found the error, I had other axios imports on several other components, it was creating several axios instances, I declared a

const axios = inject('axios')

so I could access just the axios instance that was in use instead of creating several ones.