Authenticate JWT with Vuejs and Laravel

Tram Ho


  • Hi everyone, today I am going to show you how to make a login / logout page using vuejs and laravel with JWT, I am writing this article only hope to share a bit of something useful so what is in the article Mistakes please comment, In the article I will guide you to use:
  • Vue Router: Of course every website must have a route (except the web has a page 😄 ), and vue too, use the vue router to create an SPA application.

In the routes / index.js section

and to render the router <router-view> </router-view> in the directory we want those components to be rendered

  • Vuex: To make application easier to maintain, we use Vuex to manage states in the application

This is the structure of a store in vuex

  • JWT Authentication (if you do not know JWT, please learn it. This article I only guide you to make a login / logout page).

Install JWT into laravel application ( ): composer require tymon/jwt-auth

and run the command php artisan jwt: secret

Let’s start

  • First we install a new laravel application. and install things in the Overview section that I showed
  • After installing JWT config in /config/auth.php file

Create an AuthController controller:

And create routes for Viet Authenticate:

** Remember to create a config + create a database and run migrate **.

That’s it Backend. Go to the Vuejs section

We create the following folder structure:

Create Routes and components to serve the Login:


Components: Login.vue

Create helpers: helpers / auth.js

Create store: In the Store we need to create an index.js file to store other stores, assuming your application has a lot of modules you can’t put it into a store that is difficult to develop later. /store/index.js

Create modules for Auth: /store/modules/auth.js

Create a Main.vue: /js/Main.vue to render components into: All components will be rendered here <router-view> </router-view>

Next at app.js:

Here el ‘#app’ is the id of the php blade page we want to render.

You can test with postman, here my interface is not very good build, so I test with this, wish you success

I repeat, I only share what I know, if there is anything missing in the article, I would like everyone to contribute their ideas for me to develop better. 😄 Thank you for watching .

Share the news now

Source : Viblo