Persist Access Token with Vue.js

1. Vuex Cheat Sheet
2. Vuex Cheat Sheet Pdf

Previous Post A style guide generator for Vue components with a living style guide.

Persist the Access Token from the Backend in the localStorage with Vue.js

The code is available in a Github repository

• Created by your friends at VueMastery.com COMPONENT ANATOMY CUSTOM EVENTS VUE ESSENTIALS CHEAT SHEET Vue.component('my-component'components: ProductComponent, ReviewComponent.
• Download the cheatsheets Our Vue essentials, Vue 3, and Nuxt.Js cheat sheets save you time and energy by giving you essential syntax at your fingertips.
• Vuex Cheat Sheet. GitHub Gist: instantly share code, notes, and snippets.

In the last Post, I explained how to create a Login Component with Vue CLI, SCSS, Axios and Vuex.

The Login Component uses reqres to simulate a RESTful API, we can connect to.

When we use the Login Component to authenticate, you will receive an Access Token from the API (which might look something like this: QpwL5tke4Pnpja7X).

In a realworld application, this Access Token will be used to access protected backend routes (for example a route to edit my own profile) by sending it along to the backend on every request.

It would be a very bad user experience, if the user always has to log in when he refreshes the page.

Therefore we need to persist the token in the frontend (which means, we need to store it somewhere, where we can retrieve it later on)

• I will build on top of the Login Component created in the previous Post. So make sure to clone it with

into a directory of your choice, if you want to follow along

• We will use the localStorage of the user's browser to store and persist the Access Token (Note: You should use HTTPS in a production application and secure your app for cross-site scription attacks (XSS))
  • When we login successfully for the first time, we will write the Access Token into the localStorage
  • When we load the application (for example through a refresh), we will first of all check if there is a token in the localStorage and if there is, we read it into our Vuex store

Adjusting the store

Lets modify the store first of all.

Adjust the state

• Remove the statepropertyloginSuccessful
• Add a statepropertyaccessToken with the initial value of null

Now we can determine if the user is authenticated by taking a look at the accessToken value (null = not authenticated, everything else is).

The state should look like this:

Adjust the mutations

Adjust the loginStopmutation like this:

• Remove the loginSuccessful assignment being equal to !errorMessage

Add another mutation called updateAccessToken, which:

• Sets the accessTokenproperty of the state to the one passed as parameter

The both mutations should look like this now:

Adjust the actions

The login action

Inside of the doLoginaction, we utilize Axios to send the HTTP POST request to the backend.

Because Axios is Promise based this call returns a Promise. As soon as this Promiseresolves (request successful) we will execute a function without taking a parameter: .then(() => {

This was fine because we did not care about the response (Access Token) , the server gave us. But now we want to use it.

Therefore we need to add a parameter to the function like this: .then(response => {

The responseobject holds all the information about the answer to the request we sent including the data as you can see here:

We need to adjust the (resolve) function to do two more things:

• Write the Access Token to the localStorage
• Commit the updateAccessTokenmutation, passing response.data.token as parameter

We also need to adjust the reject function:

• Commit the updateAccessTokenmutation, passing null as parameter

The doLoginaction should look like this:

The fetch Access Token action

Next, we want to create another action which will be dispatched every time the application gets loaded.

This action should simply commit the updateAccessTokenmutation and pass localStorage.getItem('accessToken') as parameter.

The fetchAccessTokenaction should look like this:

The complete store

The store should look like this now:

Dispatch the fetch Access Token action

As I mentioned earlier, we want to dispatch the fetchAccessTokenaction when the app loads initially.

A good place to do this seems to be in the App.vuecomponentcreatedlifecycle hook.

If we map the fetchAccessTokenaction with ...mapActions, we can simply dispatch the action by calling it like this: this.fetchAccessToken();

The <script> of the App.vue file should look like this:

Adjust the Login Component

Lastly we need to adjust the Login Component because we use the loginSuccessfulproperty of the state there, which no longer exists.

• Simply replace the 'loginSuccessful' in the ...mapState with 'accessToken'
• Also replace the v-if='loginSuccessful' of the Login Successfulparagraph with v-if='accessToken'

Vuex Cheat Sheet

If you run npm run serve and visit http://localhost:8080, you should see the Login Component as usual.

If you enter a valid E-Mail and Password and submit the form, the same success message should be displayed.

Vuex Cheat Sheet Pdf

But if you now reload the page, the success message should be displayed from the beginning indicating that you are authenticated and the app has an Access Token in the Vuex store which got fetched from the localStorage.

You can see the state of the Vuex store in a running Vue.jsapplication by using the Browser PluginVue.js devtools, which is available for Chrome and Firefox.

Press F12 to open up the Browser development tools.

Press F12 to open up the Browser development tools.

localStorage in Chrome

localStorage in Firefox

Try playing around with it (for example by deleting the token and reloading the page, you will no longer see the message).

I hope this helped you. If it did, make sure to follow me on social media for upcoming posts.