Laravel Vue

Best Laravel + Vue Authentication Practice Using JWT Auth

Best Laravel-Vue.js Authentication using JWT Auth: In Today’s world, Authentication is a primary concern for any web application because it will secure your web application from unauthorized users. In this tutorial, you will learn about Vue authentication using Laravel JWT package. I have also used Vuex as global state management.

Here, you can see a live demo on Laravel + Vue Authentication

Here, I am going to show you the process of implementing authentication for Vue Single Page Application with Laravel API.

Best Vue.js Authentication using Laravel – JWT Auth

Laravel is the most popular PHP framework for developing a robust and secure web application, and Vue.js is a lightweight front-end framework. Laravel framework provides built-in support for Vue.js to build a great app without refreshing a webpage.

I am going to give you a demo of authentication in

Vue – Laravel using JWT Auth.

Dependencies

  • Node.js
  • Laravel 5.8
  • JWT Auth 0.5.12
  • NPM 6.4.1
  • Vue.js 2.0
  • Vue-router
  • Vue-axios

First of all, You need to create a new laravel project using composer. Make sure you have installed composer in your machine.

#1: Create a new Laravel Project

installing laravel vue auth

After Creating Laravel 5.8 Project, Go to the project directory and install NPM for Vue.js Dependencies.

#2: Configure Database

Now, Next step is to create a database and provide the database name and credential in the .env file.

After, Configure the database in the .env file type the following command to run the migration.

#3: Install Vue Libraries

Install some necessary Vue libraries such as Vue-Router, Vue-axios, and Vuex.

You need to import and use those dependencies in the app.js file which located inside resources >> js folder.

#4: Create Vue Components

Create a file called App.vue in resources >> assets >> js folder and write below code in App.vue file.

Create another file called Home.vue inside resources >> assets >> js >> components folder and write the following code.

Then, write the below code in the app.js file.

In this tutorial, I have used materialize CSS framework. I have put CSS CDN in the welcome.blade.php file which found inside resources >>views directory. You can also include more external CSS and JS file inside the same data.

Then, Run the following command in your terminal. Every time it will compile the latest and existing CSS and JS files code when changes occur.

#4.1: Create a Register Component

Create a file called Register.vue file inside resources >> assets >> js >> components folder and put the following code in Register.vue file.

Vue Register component

#4.2: Create a Login Component

Create another file called Login.vue inside the same directory and put the below code.

#4.3: Create a Dashboard Component

Make a Dashboard.vue file inside the same directory and write the below code in it.

Here, I have also used Vuex as state management, which will store JWT token in local storage and manage it for the overall application.

To use Vuex create a file called store.js inside resources >> js and put the following code inside it.

Then, Replace the content of the app.js file.

In the above code, I have added register component, login component, and dashboard component routers with meta option and auth property, which will determine which router needs authentication.

Here, I have given requiresAuth true to dashboard route. So, dashboard route will not be able to access without login.

I have also handled a router.beforeEach() method which will check and match each route for authentication if requireAuth and isLogging are false then it will automatically redirect to the login page. Otherwise, it will redirect to the dashboard route.

I have completed Laravel + Vue Authentication Practice Using JWT Auth tutorial with example. I hope you have learned from this tutorial and will implement JWT Auth in your application. Thank you.


About the author

Parth Vakil

Full Stack Developer at Artixun Softwares. My specialty is web development with Laravel/Node development, using JS libraries such as JQuery, Angular, Vue, React and Ionic

2 Comments

Leave a Comment