63. Introduction to Vue Auth

In this video, we'll be installing and setting up Vue Auth which is a simple, lightweight, authentication library for Vue.js.

It has four main features:

Firstly, it manages the authorization process, including the login, logout, and registration requests to the API.

Secondly, Vue Auth will manage the JSON web token, storing it when the user logs in or registers, and deleting it when they logout or it expires.

Thirdly, it allows us to set up user roles and protect routes based on those roles. We can make it so that any of the routes we have setup can only be accessed by a certain user type.

For example, we might stop users from accessing the admin pages unless they're logged in as admin.

Finally, Vue Auth provides reactive global variables that allow us to adapt the UI based on a user's role and authentication status.

For example, if a user is logged in, we can add a greeting to the nav bar using their name. Or if they're are a guest, we can remove the greeting and replace it with a login link.

So let's get it installed and set up.

Installation

To install the Vue Auth package we'll type:

$ npm i @websanova/vue-auth -D

We'll then add Vue Auth to our main.js file, so let's go to the top and put import VueAuth from "@websanova/vue-auth";.

Config file

client/main.js

import VueAuth from "@websanova/vue-auth";

We'll now need to create config file for Vue Auth, so let's put this in the client directory and call it auth.js.

$ touch client/auth.js

In this config file, we'll simply export an empty object for now, and we'll come back later to add more configuration.

client/auth.js

export default {};

Add to Vue

Back in our main.js file, let's now install VueAuth as a plugin. We'll begin by importing our config file by going to the top again and putting import VueAuthOptions from "./auth";.

We can then install the Vue Auth plugin by using Vue.use() and passing VueAuth as the first argument, and VueAuthOptions as the second argument.

client/main.js

import VueAuth from "@websanova/vue-auth";
import VueAuthOptions from "./auth";

...

Vue.use(VueAuth, VueAuthOptions);

Vue-Axios

As we said earlier, Vue Auth will manage the user's auth token. To do this, though, it needs to integrate with the HTTP client that you're using, which in our case is Axios.

Now, unlike with Vuex ORM, we'll need to manually add Axios and attach it to the Vue object where Vue Auth can find it.

The easiest way to do this is to install a package called vue-axios. This package will basically just wrap an Axios wrapped in a Vue plugin.

Let's install it by going to the console and typing:

$ npm i vue-axios -D

Installing Axios

Once Vue Axios is installed, we'll now import Axios into our Vue app by going import axios from "axios";, and we'll also import the Vue Axios plugin by going import VueAxios from "vue-axios";.

With that all done, we can now install Vue Axios by calling Vue.use() and passing VueAxios as the first argument, and the axios instance as the second argument.

This should all go above the VueAuth plugin installation to ensure that Axios is present on the Vue instance by the time Vue Auth goes to looks for it.

client/main.js

import VueAuth from "@websanova/vue-auth";
import VueAuthOptions from "./auth";
import axios from "axios";
import VueAxios from "vue-axios";

...

Vue.use(VueAxios, axios);
Vue.use(VueAuth, VueAuthOptions);

Drivers

Returning to our Vue Axios config file, there are several essential config options that are required to make Vue Auth work.

Firstly, keep in mind that Vue Auth is designed to be flexible and integrate into any app setup.

This means you can still use Vue Auth even if you're not using Axios and JSON web token like we are. You can even use a different router to Vue Router.

For that reason, we'll need to supply Vue Auth with drivers for the HTTP client, the router, and the auth style, so it knows how to correctly manage those.

Fortunately, there are default drivers supplied with Vue Auth that will work for us out of the box, so all we need to do is import them, and add them to our config object.

Importing drivers

Let's begin by importing a variable auth, and we'll assign to that the provided JWT driver which is found in the vue-auth package at "@websanova/vue-auth/drivers/auth/bearer".

Next, we'll import http, and we'll assign to that the provided Axios driver which is found at "@websanova/vue-auth/drivers/http/axios.1.x".

Finally, we'll create an import called router, and we'll assign to the Vue Router 2 driver which is "@websanova/vue-auth/drivers/router/vue-router.2.x".

With that done, let's now add all of these drivers to the config object, keeping in mind that the property names are the same as the variable names we've created so we can use this shorthand and put auth, http, and router.

client/auth.js

import auth from "@websanova/vue-auth/drivers/auth/bearer";
import http from "@websanova/vue-auth/drivers/http/axios.1.x";
import router from "@websanova/vue-auth/drivers/router/vue-router.2.x";

export default {
  auth,
  http,
  router
};

And with that, we've now got a bare-bones setup for Vue Auth in our project.

Discussion

0 comments