62. Module introduction

Now that we have endpoints on our API for registering a user, logging in and logging out, let's give our users access to those features by adding authentication to our client app.

In this module, we're going to be doing exactly that with the help of a very handy Vue.js library called Vue Auth.

Intro and install for Vue Auth

We'll begin this module with an introduction to Vue Auth, showing how it can be used to manage the login and registration actions, manage our auth token, and how it can also be used to reactively update the UI based on the user's auth status.

We'll then install Vue Auth and configure it, including adding the various drivers we need to link Vue Auth to Axios and our auth token, and to our API auth routes.

Auth management

We'll then set up our app so that users can login and register via the UI. This will require us to create a user model with Vuex ORM which we can bind to our auth forms.

Role-based UI

Remember that we have different user roles, including an admin role and a regular user role.

We'll now utilize these roles in the client app, firstly to protect certain routes. For example, we can block regular users from visiting admin pages.

We can also alter our UI based on role. For example, we can display a user's name in the nav bar if they're logged in, or replace that with a login link if they're not.


In the last section of the module, we'll rig up some forms that will allowthe admin user to create, update, and delete items from the client app.

This will involve linking Vue Auth to Vuex ORM, allowing the latter to make authenticated requests. We'll also be creating logic for the forms linking to the main API methods.

Let's get started!