DEV Community

Cover image for Import Store into route.js and Authenticate routes in Quasar
George Ikwegbu Chinedu
George Ikwegbu Chinedu

Posted on

Import Store into route.js and Authenticate routes in Quasar

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

Table Of Content

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.
Enter fullscreen mode Exit fullscreen mode

Export An Instance Of The Store

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

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

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

Alt Text
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

Alt Text

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)
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Set the Token of the Store with Vuex Action on Login/Signup

Alt Text

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

Alt Text

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

Alt Text

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(/)...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

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Logout And Clearing Token

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
Enter fullscreen mode Exit fullscreen mode

Please check Actions and Mutations to know how the USER_LOGOUT was used.

Top comments (4)

Collapse
 
code_sammy98 profile image
Samuel Uzor

great write up. but please can you use a better font on your text-editor next time so readers dont get to stress their eyes
great work

Collapse
 
gikwegbu profile image
George Ikwegbu Chinedu

Ok chief, am so sorry about that.
Will put that in check...

Collapse
 
petrvytlacil profile image
Petr Vytlačil

Please can you uploade source code (images) in in higher resolution?
THX

Collapse
 
adeola23 profile image
Adeola Abiola

your font is not readable