Simple Authentication components strategy with VueJs

I’m lead dev at Kaliop and today I speak about simple authentication components strategy with VueJs.

A lot of application are using authentication, and we use many variants to handle it properly. The component system of VueJs is powerful, so let’s use it to simply handle authentication process.

We can restrict page access with navigation guards in vue-router, but sometime the need is really simple, and we can use only components to handle page accessing.

Let’s say we have a page we want to protect, like a administration dashboard, an account page, or other things : a private page.

This page is really simple, but can make some api calls to display private information.

Now, let’s configure the vue-router to expose this page.

We now have the restricted page, we want a login page. For our example, we are going to use a very simple login page.

The login method is really simple : it just sends an event to the parent, but in real life cases, we have to make an api call, or check a cookie, or a vuex store… whatever will work.

And now, here is the authentication component strategy :

Instead of having navigation guards, a redirection, or multiple components for each state of our user, we simply check if the user is logged in or not.

If the user is logged in, we display the page corresponding to the route, if not, we display the login component.

In our example, when user logs in, the component App.vue knows that the user is logged in, and display the router-view, not the login page.

The system is really simple in this example, but instead of looking for the isLoggedIn data, we can read a cookie, look in a vuex store, make a api call, etc…

And we can use Vue transition for a smoother switch between the login form and the restricted page

This solution is not the best, as it can’t handle all the cases, but for simple needs, it does the job !

Related posts:

Thanks to the machines learning technology, Apple has announced a new feature called Live Text in iOS 15, which can detect and recognize text from camera in real-time. It is a handy function to turn…

From the moment I could sit upright on my own, I’ve been a fidgeter. In fact, my inability to keep still led to so many incidents that my mom had me walk through stores with my hands on my stomach in…

This is a guest post by James Mortemore, who is a software engineer at YLD. He has an extensive background in API development & enterprise integration architecture. Out of the box, GraphQL supports…