Image

token-based-authentication

4 min read
Last update: December 19, 2021

Automatic Login

Once a user is logged into our app, we want the ability to keep them logged in, even if they refresh the browser or close the tab our app is running in. In this lesson, we’ll learn how to accomplish this through a process of automatic login.


The user State disappears

Currently if we refresh the browser when a user is logged in, we can see in the Vuex tab of the Vue DevTools that our user State disappears. This also happens if we were to close the app and reopen it in a new tab. But we don’t necessarily want to force our user to log back in every time one of these things happen. Instead, we can utilize the user data we already have in the browser’s local storage to restore this Vuex state, which effectively logs the user back in automatically.

To handle this, we’ll head into our main.js file and add some code that will run every time the app is created.


Implementing Automatic Login

When our app is created, we want to check if there is a user in our local storage, and if so, we can restore the Vuex user State with that user data. If you recall from earlier in this course, when a user logs in we set our user data by using the Vuex Mutation by the same name: SET_USER_DATA. We can make use of that Mutation to restore our user State with the user data we have in our local storage, when the app is created.

Let’s make that happen within our main.js file now.

src/main.js

new Vue({
router,
store,
created () {
const userString = localStorage.getItem('user') // grab user data from local storage
if (userString) { // check to see if there is indeed a user
const userData = JSON.parse(userString) // parse user data into JSON
this.$store.commit('SET_USER_DATA', userData) // restore user data with Vuex
}
},
render: h => h(App)
}).$mount('#app')

As you can see in the created hook, we’re checking to see if user data exists in our local storage, and if it does we’re parsing that data into JSON and passing it in as the payload when we commit the SET_USER_DATA mutation, which effectively logs our user back in.

Great. Now our user won’t have to log in every time the browser is refreshed. They could even close their entire browser, go to bed, and navigate to our app the next day and find themselves “still” logged in. I say “still” because technically they were logged out, but we forced that re-login process when they pulled up the app.


Adding a Security Measure

While we’re here in the main.js file, we can take some time to add a security measure to our app. Currently, it’s possible for an ill-intentioned person to save a fake token to local storage. While this might allow them to navigate to certain parts of our app, if they navigate somewhere that makes an API call for private resources, we can intercept that request and log them out.

Let’s take a look at the code for that:

src/main.js

new Vue({
router,
store,
created () {
...
axios.interceptors.response.use(
response => response, // simply return the response
error => {
if (error.response.status === 401) { // if we catch a 401 error
this.$store.dispatch('logout') // force a log out
}
return Promise.reject(error) // reject the Promise, with the error as the reason
}
)
},
render: h => h(App)
}).$mount('#app')

If we step through this, we see we’re intercepting the response from axios, and returning it as-is when it’s correct. However, when there is an error , we’re checking to see if it’s a 401 status code ( which means the user is unauthorized to view the content they’re attempting to load), and if so we use Vue Router to redirect to the homepage, and use Vuex to force a logout. We’ll then return a rejection of the Promise, and pass in the error as the reason for that rejection.

Great. Now even if someone attempts to hack our app with a fake token, they will be logged out as soon as they try to access private resources.


Let’s ReVue

In this lesson, we added a feature to automatically log users back into our app, and we also added a feature to log malevolent users out of our app if they’re using a fake token.

That brings us to the end of our Token-Based Authentication course. I hope you’ve learned a lot and feel confident about implementing authentication in your own apps. See you in another course!