Import Store into route.js and Authenticate routes in Quasar
Tags: beginners, vue
Published: 2020-06-22 10:39:55

Today, I will be walking you through on how to Authenticate your application routes using the Auth Guard.

## Table Of Content
  * [Export an instance of the Store](#chapter-1)
  * [Import { Store } into routes.js](#chapter-2)
  * [Add beforeEnter guard into the Route you wish to Authenticate](#chapter-3)
  * [Create your Token and User data in your Store State](#chapter-4)
  * [Set the Token of the Store with Vuex Action on Login/Signup](#chapter-5)
  * [Set the Token of the Store with Vuex Mutation on Login/Signup](#chapter-6) 
  * [Using the Above in Signup.vue file](#chapter-8)
  * [Using the Above in Login.vue file](#chapter-9)
  * [Logout And Clearing Token](#chapter-10)

### Introduction

    So, I am starting off, on the premise that you already know what Quasar 
    is all about, and how some little things work. Anywho, I will try to 
    include some functionalities so as to carry everyone (beginner, to 
    advanced) along.

### Export An Instance Of The Store <a name="chapter-1"></a>
When you init your quasar app (with the current version as of the time of writing this article). Your store will come predefined with the below image   

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p3goih1rcqoohqim1yts.PNG)

To Add new vuex store Module, write the below code in your project root terminal
## 
              $ quasar new store <store_name>

    where <store_name> could be anything you wish to name your store,  
              $ quasar new store userAccount

Once that is done, import the vuex module into your store index.js, and register it inside the modules section.

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yr1g6dn7a7dh01r1wqbf.PNG)
> Line-6: Importing the new module
> Line-23: Registering it into the module section...Do same for new modules you create.

#### Almost Done, Time To Actually Export An Instance of The Store
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/43slgpj11xzrmipet8hn.PNG)

> Line-10: Created a constant variable 'Store' (watch the name Store). where i intanciated a new Vuex.Store().
> Line-56: I exported the instance i created on line 10.
#
        All I did was just cut the new Vuex.Store(), out of the 
             'export default function ()' in lines 51-55.

## Import { Store } into route.js <a name="chapter-2"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/za71ejxbqldajp782oce.PNG)
Import the exported Store from the store index.js, so as to have access to your store on the route.js

## Add beforeEnter guard into the Route you wish to Authenticate <a name="chapter-3"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f32y871p9c5wftks02v4.PNG)

> Line-23 to Line-29: I where i added the beforeEnter(), this should be added to the route you wish to authenticate, or do any other checks before the view is being loaded. '/main' being the layout of my authorized pages, I then added the beforeEnter() to it 

#### Explaining the beforeEnter()
This is a navigation Guard in vue, which allows you to intercept the navigation between your current page and the next page. Just like axios interceptors (if you ask me). So it's being passed three (3) parameters 

#
             beforeEnter(to,from,next)

> to : points to the next route/page you're about to enter

> from : points to the route/page you just left

> next : this is a callback function, which when used as next(), would continue the function the navigation had (say the token exits, the next() will just log user in). But when the authentication fails, you then use the next('/signup'), to redirect user to the signup page.


## Create your Token and User data in your Store State <a name="chapter-4"></a>
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/px6knu6wt4kj36glmnmb.PNG)

> Remember that Quasar Store States are always a function with returned object.

## Set the Token of the Store with Vuex Action on Login/Signup <a name="chapter-5"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4f7yyl3rbj6pnx4s5yrx.PNG)

> Line-1: I imported the axios, because I want to set the header, of the authorization.
 Line-4 to Line-9: This takes care of the user signing up, commiting to mutation with the payload, setting the localStorage with the 'token' and 'user'. Then I have a callback function of setAxiosHeaders(), which is then used to set the axios headers.

> Line-11 to Line-13: Is used to log user out and destroy the token from the localStorage

> Line-16 to Line-21: Is used to log user into the system, then commit the same mutation as the line-5, with same details.

> Line-24 to Line-27: Is the callback function used in Line-8, to set the axios header.

## Set the Token of the Store with Vuex Mutation on Login/Signup <a name="chapter-6"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n4qf0it5qcc4jwqlk7lj.PNG)

> Line-2 to Line-5: This is for mutating the state, by adding the token and the user object gotten from the payload, passed along by the actions, to the state.

> Line-7 to Line-13: This is used to destroy the users token and object, and remove them from the localStorage.

## Using the Above in Signup.vue file <a name="chapter-8"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bwmd3zuc0nzltpbnlvmo.PNG)

> Line-78: This is where I import the mapActions from the vuex, to enable me grab my action from my store. You could also use this.$store.dispatch(<store-name>/<the-particular-action-you-wish-to-use>)...i.e this.$store.dispatch('userAccount/USER_SIGNUP')

> Line-107: This is where i init the imported mapAction (sinces it's a method), where the first parameter is the name of the store, and the ARRAY is the name of the-particular-action-you-wish-to-use

> Line-151: This is where I passed the payload, gotten from the  response of the axios call. From there, check out the actions, and how the payload was used.

## Using the Above in Login.vue file <a name="chapter-9"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tb3zdfz6lcxe8ih2upno.PNG)

> Line-73: This was where I called the vuext action, and passed the payload.

#
        I like using const _ = this;
      so i can use _ to relate to anything declared in the 
             component hook

## Logout And Clearing Token <a name="chapter-10"></a>
Simply attach a function to your logout button, which would call the vuex mapAction to notify the mutation to clear the token and user from the store and the localStorage, then redirect the router with router.replace('/')

    logout(){
      this.$store.dispatch('userAccount/USER_LOGOUT')
      this.$router.replace('/auth/')
    }

    used the old fashioned way, 'dispatch()
    NB: the route '/auth/', is where my login is located

Please check [Actions](#chapter-5") and [Mutations](#chapter-6") to know how the USER_LOGOUT was used.