Web APIs are interfaces for various software and components. It makes possible to generate the same result by handling requests sent via different technologies. Luckily Laravel and Vue provides a nice and fluent way to work with APIs.

APIs in general

Web APIs are spots for different technologies to making the same results by handling requests on a standard interface. Because various software and technologies can use the same API, the authentication works differently than a typical web app. Instead of sessions, APIs mostly use tokens to identify the user who sent the request. We call this authentication stateless.

Most of the cases, our web app interacts with APIs with the help of a JavaScript framework., like Vue or Angular. That means if we need to pass any additional credentials in our request, we need to configure it on the JS end.

Laravel & APIs

By default, Laravel provides a nice way to work with APIs. To provide API authentication to our actions, we need to attach the “auth:api” middleware to them. In this case, the API guard is being activated, and the token based authentication is alive.

The way it works, Laravel parses the request and searches for appropriate key-value pairs. For example, if we are using the query string to pass the credentials, it looks for the api_token key. If the credentials given in the header, Laravel looks for the Authorization header, where we need to pass a Bearer token as a reference.

Put the pieces together

Our first job to configure the axios library, which is a replacement for the Vue resource. We need to pass the credentials from our back-end, and convert the data into a JavaScript object what our Vue + axios combo can read.

// footer.blade.php

<script>
   window.Laravel = {!! json_encode([
       'csrfToken' => csrf_token(),
       'apiToken' => $currentUser->api_token ?? null,
   ]) !!};
</script>

Next, we need to boot up our JS services, using the default bootstrap file what Laravel ships in version 5.4.

// bootstrap.js

import Vue from "vue";
import axios from "axios";

window.Vue = Vue;

axios.defaults.headers.common = {
    'X-CSRF-TOKEN': Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest',
    'Authorization': 'Bearer ' + Laravel.apiToken,
};

window.Vue.prototype.$http = axios;

Now we are ready to communicate with our API back-end. Because of the authorization and authentication work on our stateless interface, we can identify the current user, who made the request.

// app/Http/Controllers/SomeApiController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SomeApiController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth:api');
    }

    public function index(Request $request)
    {
        $user = $request->user();

        return response()->json($user);
    }
}

As we see, in our controller, we don’t get data from the session, but the request itself. That means it doesn’t matter if the request from a iOS or Android app, a web service or a desktop software. We can identify the user by the passed token, what allows us to handle the request and send the response to every platform in the same way.