Building a Vue 3 Inventory Login with Axios and JWT Authentication

Learn how to build a Vue 3 inventory login page, connect it to a REST API with Axios, authenticate users with JWT, and redirect them to a dashboard.

In the previous article, we introduced the architecture of our inventory control system and how the Vue 3 frontend will communicate with a backend through REST APIs.

In this article, we will start building the frontend by scaffolding a Vue application and then creating the login page. The login page will communicate with the backend login endpoint using Axios, process the authentication response, store the JWT token, and redirect the user to the dashboard after a successful login.

Scaffolding the Vue Application

We first need to create the Vue application that will serve as the frontend for the inventory control system.

If Vue CLI is not already installed, install it globally:

npm install -g @vue/cli

We can then create the application using:

vue create inventory-app

During the setup process, Vue CLI provides options for configuring the project.

For this project, we select the Vue 3 configuration.

Once the project has been created, move into the project directory:

cd inventory-app

The application can then be started using:

npm run dev

Vue CLI will start the development server and provide a local URL where the application can be accessed.

At this point, we have a basic Vue 3 application that will serve as the foundation for our inventory control system.

Installing Axios

The frontend needs to communicate with the backend REST API. We will use Axios to make HTTP requests.

Install Axios with:

npm install axios

Axios allows the Vue application to send requests such as:

GET

POST

PUT

DELETE

to the backend API.

For example, the application can use Axios to send a login request:

axios.post("/api/login", {

    username: username,

    password: password

});

Creating the Login Page

With the Vue application scaffolded and Axios installed, we can create the login page.

I created a component called:

src/views/LoginPage.vue

The LoginPage.vue component will contain both the login interface and the logic required to communicate with the backend authentication endpoint.

The login process will follow this flow:

 Importing Axios and Vue Router

The first step inside LoginPage.vue is to import the functionality required by the component.

Axios is imported for communicating with the backend:

import axios from "axios";

We also need Vue Router because the user will be redirected to the dashboard after successful authentication:

import { useRouter } from "vue-router";

The router can then be initialized:

const router = useRouter();

Declaring the Login Variables

The login form requires two values: the username and password.

These values are declared as reactive variables:

const username = ref("");

const password = ref("");

They are then connected to the form fields using Vue's v-model:

<input

    type="text"

    v-model="username"

    placeholder="Username"

/>

<input

    type="password"

    v-model="password"

    placeholder="Password"

/>

When the user enters their credentials, Vue automatically updates the corresponding variables.

These values will later be included in the API request payload.

Displaying Login Status

The application also needs to provide feedback to the user during the login process.

For this purpose, I declared another reactive variable called message:

const message = ref("");

The variable can be used to display messages such as:

Logging in...

Login successful.

or:

Invalid username or password.

This gives the user feedback about the result of the login operation.

Creating the Submit Function

The actual API communication takes place inside a submit arrow function:

const submit = async () => {

    // Login implementation

};

The function is asynchronous because it needs to wait for a response from the backend.

When the user submits the login form, the function sends the username and password to the login endpoint through Axios.

const response = await axios.post(

    "/auth/login",

    {

        username: username.value,

        password: password.value

    }

);

The username and password entered by the user therefore become part of the API request payload.

Processing the Backend Response

After the backend processes the login request, it returns a response.

In this implementation, the response contains a success value.

We can check the value using:

if (!response.data.success) {

    message.value = response.data.message;

    return;

}

If success is false, the login was unsuccessful and the message returned by the backend is displayed to the user.

If authentication is successful, the application continues with the login process.

Storing the JWT Token

After a successful login, the backend returns a JWT token.

The token is stored in the browser's local storage:

localStorage.setItem(

    "token",

    response.data.token

);

The token can later be retrieved when the Vue application makes authenticated requests to protected backend endpoints.

This becomes particularly important when we start integrating modules such as categories, products, sales, purchases, customers, and staff.

Redirecting to the Dashboard

Once authentication has succeeded and the JWT has been stored, the user is redirected to the dashboard:

router.push("/dashboard");

Handling Exceptions

Network requests can fail for reasons other than invalid login credentials.

For example, the backend may be unavailable or there may be a network problem.

The Axios request is therefore wrapped inside a try...catch block:

try {

    const response = await axios.post(

        "/auth/login",

        {

            username: username.value,

            password: password.value

        }

    );

    if (!response.data.success) {

        message.value = response.data.message;

        return;

    }

    message.value = "Login successful.";

    localStorage.setItem(

        "token",

        response.data.token

    );

    router.push("/dashboard");

} catch (error) {

    message.value = "Unable to connect to the server.";

    console.error(error);

}

The try block contains the normal login process, while the catch block handles unexpected errors.

Conclusion

We have now created the foundation of the Vue 3 frontend for our inventory control system and implemented the basic login flow.

The application can now authenticate a user, store the JWT token, and redirect the user to the dashboard.

However, storing the JWT is only one part of authentication. The token must also be included in requests to protected backend endpoints.

In the next article, we will use the stored JWT token when making authenticated API requests from Vue 3.

Vue 3, Vue.js, Axios, JWT, REST API, Authentication, Login, Inventory Control System, Inventory Management, JavaScript, Vue Router, Frontend Development, API Integration, Web Development