How to authenticate Vue.js / Axios request of an API route in Laravel

I solved it! I'm a bit embarrassed because the answer was actually in the Laravel docs, but I will say I tried this before posting the question here and it wasn't working. Perhaps something else was broken at the time.

Per the Laravel docs:

All you need to do is add the CreateFreshApiToken middleware to your web middleware group in your app/Http/Kernel.php file:

'web' => [    // Other middleware...    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,],

This Passport middleware will attach a laravel_token cookie to your outgoing responses. This cookie contains an encrypted JWT that Passport will use to authenticate API requests from your JavaScript application. Now, you may make requests to your application's API without explicitly passing an access token...

You will probably want to use Larvel Passport or a JWT auth mechanism for obtain the Authorization token.

Seeing as how you're using axios, add a request interceptor to attach the access token to every request once you successfully authenticate. A simple example:

// Add a request interceptoraxios.interceptors.request.use(function (config) {    // assume your access token is stored in local storage     // (it should really be somewhere more secure but I digress for simplicity)    let token = localStorage.getItem('access_token')    if (token) {       config.headers['Authorization'] = `Bearer ${token}`    }    return config;  }, function (error) {    // Do something with request error    return Promise.reject(error);  });

to use the auth:api first you need api_token inside your users table

Schema::table('users', function ($table) {    $table->string('api_token', 80)->after('password')                        ->unique()                        ->nullable()                        ->default(null);});

also you can create a user for testing as follows

User::create([        'name' => $data['name'],        'email' => $data['email'],        'password' => Hash::make($data['password']),        'api_token' => Str::random(60),    ]);

in your layout use the following before @yield('content')

<script>     window.Laravel = <?php echo json_encode(['api_token' => (Auth::user())->api_token]); ?></script>

now you can use window.laravel.api_token inside your vue js to use it in headers

heres an example

var methods = new Vue({    el: '#tabs_lists',    data: {        config: {            headers: {              Authorization: 'Bearer ' + window.Laravel.api_token,              Accept: 'application/json'            }           },        data: []    },    methods: {        test: function (link) {            axios.get(link, this.config)               .then(response => (this.data = response.data)).catch(function (error) {                // handle error                console.log(error);              });        }    }}  )