Authenticating Vue.js / Axios requests to an API route in Laravel: A step-by-step guide

Question

Authenticating Vue.js / Axios requests to an API route in Laravel: A step-by-step guide

I've been working with Laravel 5.6 and have successfully set up all my API routes, which are responding to requests from my REST client (Paw). Now, I want to create a basic front end to interact with these routes.

In an effort to utilize Laravel's built-in features as much as possible, I am using Axios to make calls to these routes from a blade template using Vue.js. Everything works fine if I disable the authentication middleware on the test route. However, when I enable the auth middleware for the route, I start getting 401 errors in the console.

The issue seems straightforward... The auth:api guard on my /api routes requires an oauth token in the header, but when logging in through the web page, it uses session authentication instead. Is there a simple solution to this problem that doesn't involve faking an oauth token request in the front end? Can I pass the session token in my Axios request somehow? And, if so, do I need to adjust the auth:api guard in my api routes file?

laravel authentication vue.js axios

Answer 1

Answer №1

After some detective work, I finally cracked the code! It's a bit cringeworthy because it turns out the solution was right there in the Laravel docs all along. However, I did give it a shot before turning to this forum for help and couldn't get it to work at that time. Maybe something else was causing issues back then.

According to information from the official Laravel documentation:

To successfully implement the functionality, simply incorporate the CreateFreshApiToken middleware into your web group of middlewares within the app/Http/Kernel.php file:
'web' => [
    // Additional middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],
Through the assistance of this Passport middleware, a laravel_token cookie will be included in your outgoing responses. This cookie contains an encrypted JWT which is used by Passport to verify API requests coming from your JavaScript-based application. As a result, you can now send requests to your app's API without explicitly providing an access token...

Answer 2

After some detective work, I finally cracked the code! It's a bit cringeworthy because it turns out the solution was right there in the Laravel docs all along. However, I did give it a shot before turning to this forum for help and couldn't get it to work at that time. Maybe something else was causing issues back then.

According to information from the official Laravel documentation:

To successfully implement the functionality, simply incorporate the CreateFreshApiToken middleware into your web group of middlewares within the app/Http/Kernel.php file:
'web' => [
    // Additional middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],
Through the assistance of this Passport middleware, a laravel_token cookie will be included in your outgoing responses. This cookie contains an encrypted JWT which is used by Passport to verify API requests coming from your JavaScript-based application. As a result, you can now send requests to your app's API without explicitly providing an access token...

Answer 3

Answer №2

For securing your API calls, consider using Laravel Passport or a JWT authentication mechanism to obtain the necessary Authorization token.

Since you are working with axios, you can enhance security by adding a request interceptor that automatically includes the access token in every request after successful authentication. Here's a basic example:

// Request interceptor setup
axios.interceptors.request.use(function (config) {
    // Retrieve the access token from local storage
    let token = localStorage.getItem('access_token');
    if (token) {
       config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  }, function (error) {
    // Handle request errors
    return Promise.reject(error);
});

Answer 4

For securing your API calls, consider using Laravel Passport or a JWT authentication mechanism to obtain the necessary Authorization token.

Since you are working with axios, you can enhance security by adding a request interceptor that automatically includes the access token in every request after successful authentication. Here's a basic example:

// Request interceptor setup
axios.interceptors.request.use(function (config) {
    // Retrieve the access token from local storage
    let token = localStorage.getItem('access_token');
    if (token) {
       config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  }, function (error) {
    // Handle request errors
    return Promise.reject(error);
});

Answer 5

Answer №3

For utilizing the auth:api, you must first ensure that your users table contains an api_token.

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

You can also create a user for testing purposes using the following method:

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

In your layout, make sure to include the following code before @yield('content'):

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

Now, you can access and use the window.laravel.api_token inside your Vue.js components to pass it in headers.

Here's a basic 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);
              });
        }
    }
}
  )

Answer 6

For utilizing the auth:api, you must first ensure that your users table contains an api_token.

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

You can also create a user for testing purposes using the following method:

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

In your layout, make sure to include the following code before @yield('content'):

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

Now, you can access and use the window.laravel.api_token inside your Vue.js components to pass it in headers.

Here's a basic 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);
              });
        }
    }
}
  )

Authenticating Vue.js / Axios requests to an API route in Laravel: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating CSS animations into Vue.js while an API call is being made

Vue: update data and trigger function upon completion of animation transformation, utilizing animation transformation completion listener

Is there a way for me to adjust the font size across the entire page?

The animation feature on the slideshow is dysfunctional

The v-select menu in Vuetify conceals the text-field input

Arranging elements in a row and column to ensure proper alignment

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

The CSS styling of Vuetify TreeView does not support text wrapping

What could be preventing the background image from displaying properly?

How to conceal sections of a webpage until a child component is successfully loaded with vue

Challenges with the height of the calendar component in Vuetify

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Choose the option for overseeing safaris

Expanding the input focus to include the icon, allowing it to be clicked

Vue: Implement out-in transition where the incoming element appears before the outgoing element has completely disappeared

Password confirmation on the login screen will be displayed in a single line

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

Tips for eliminating the ripple effect when clicking on a q-list item

Utilizing the power of Scoped CSS with Bootstrap/Bootstrap-Vue Integration