I personally preferred Vue because of following strong points:
- Light Weight
- Maturity of the framework
Presently it has 125,083 Github stars and left many other top front-end development tools behind. It was first released in 2013. In last 4–5 years, the progress is significant with its active contributors and supporters.
In this tutorial we will learn how to store the token locally into your machine and place router guards to prevent unauthorized access into the routes for new user login and registering a valid user into our database. Finally we will move on to destroying the token during logout.
Now let’s dive in authenticating a vue application with Vue-router, Vuex and Axios. I presume you have Vue CLI 3 installed and other required setup made. Firstly, we will scaffold our application with our CLI command.
Now, we have made some necessary changes and the screen looks like this for now.
Here what have we done so far is we have setup our routes into two separate views. We have styled a bit with Tailwind. Now lets look at the piece of code:
We will create a login.vue file where we will write following code:
In the code above we have our input fields with v-model directive which holds the value of the respective input holders. And we will have our values holding will be returned below in script tags.
After the above code we will take up our store and do some necessary changes getting and storing the token locally inside the browser.
In the code above we have stored our token into our local storage which we received from our backend into the token value. We have also checked whether the user is logged in or not. The data received from the model are posted through our API endpoint using axios. Further we have to dispatch the getToken method we made, take a look at the following code.
Here we have chained multiple call with then() to our loginAction function which will eventually lead us to next desired route. We have our all code working fine now the problem that we have is we can get into any route now we have to place some router guards to our routes which we will place it into our main main.js file and add up some meta data to our router.js file.
We have added a new route to our router file named ourApp which we will push our route after the successful login completion. We have placed some meta field in our route handlers naming needsVisitors and needsAuth to the respective route fields. And also we have coded some router-guards along side the meta data received from our routes.
For our new user registration we are going to make some changes in our register.vue file which serves as a separate view for the application. Lets bind the input values and use our store to dispatch some action for the new user.
Here we have form our validateBeforeSubmit function which will be called before the form input bindings have been submitted into the database with POST method. We also have installed vee-validate imported in main.js as our development dependencies which will check if any false input in the fields.
After the register action it will call store to dispatch action with userRegister. In the store.js we have our our action made which looks like below:
Along with the valid data in our vue model we have our three data fields posted into the database with POST method. Now the next step is to destroy the token we have stored locally.
Lets first create our logout button in the ourApp.vue and we will redirect into the Logout.vue, where we will dispatch destroyToken from the store. In the store we have the the function name which we will have headers of our authentication and post it into the database. We will check whether the state token is null or not and proceed with the function.
Also, the other great thing about local storage is the size restriction: we can use it to cache data for later usage. But in the case of cookies, this isn’t the case as there is a size restriction of 4KB, while Local storage provides at least 5MB of data storage across all major web browsers.
Authentication with localStorage
Is localStorage bad for performance?
Principal Evangelist at Mozilla Christian Heilmann has written a feature outlining problems with local storage for…
Pros and cons in using JWT (JSON Web Tokens)
For apps that require a sever-side implementation, the clients (mobile app or web browser)generally have to prove their…
As JWT is a fairly new concept, one might not find the libraries in all the languages out there. Adding to it, neither JWT nor Sessions solve the CSRF or XSS issues, as it completely depends on how we send the data. JWT is fast for development is less customizable, risky and slightly complicated to understand.
But there is still debate whether Cookies or Token is better for storing the data. I personally prefer using token as it is much easier and widely loved by developers.
Thanks for reading. Happy Coding !!