Authenticate JWT với Vuejs và Laravel

Tram Ho

Overview

  • Chào mọi người, hôm nay tôi sẽ hướng dẫn mọi người cách làm một trang login/logout sử dụng vuejs và laravel với JWT, tôi người viết bài viết này chỉ mong chia sẽ kiến một chút gì đó hữu ích nên trong bài viết có gì sai sót xin mọi người góp ý ạ
    Trong bài tôi sắp hướng dẫn sẽ sử dụng :
  • Vue Router : tất nhiên mọi trang web đều phải có route ( ngoại trừ web có 1 trang 😄 ), và vue cũng vậy, sử dụng vue router để tạo nên một ứng dụng SPA.

Trong mục routes/index.js

và để render router <router-view></router-view> trong thư mục ta muốn các components đó đc render vào

  • Vuex : Để ứng dụng dễ dàng bảo trì hơn ta sử dụng Vuex để quản lý các state trong ứng dụng

Đây là cấu trúc của một store trong vuex

  • JWT Authentication ( nếu các bạn chưa biết JWT thì hãy tìm hiểu nó nhé bài này mình chỉ hướng dẫn các bạn làm trang login/logout).

Cài JWT vào ứng dụng laravel ( https://jwt-auth.readthedocs.io/en/docs/laravel-installation/ ):
composer require tymon/jwt-auth

và chạy lệnh php artisan jwt:secret

Let’s start

  • Đầu tiên ta cài ứng dụng laravel mới. và cài những thứ ở phần Overview tôi đã hướng dẫn
  • Sau khi cài JWT config ở file /config/auth.php

Tạo một controller AuthController:

Và tạo các routes cho việt Authenticate :

** Nhớ tạo config + tạo database và chạy migrate **.

Thế là xong phần Backend. Đến phần Vuejs

Ta tạo theo cấu trúc folder như sau :

Các bạn hãy tạo Routes và các components để phục vụ cho việc Login :

Routes:

Components :
Login.vue

Tạo helpers : helpers/auth.js

Tạo store :
Trong Store ta cần tạo 1 file index.js để chứa các store khác, giả dụ ứng dụng có bạn có rất nhiều modules bạn không thể nhét nó vào 1 store điều đó rất khó để phát triển sau này.
/store/index.js

Tạo modules cho Auth: /store/modules/auth.js

Tạo một Main.vue : /js/Main.vue để render các components vao`: Mọi components sẽ được render vào đây <router-view></router-view>

Tiếp theo tại app.js :

Ở đây el ‘#app’ là id của trang blade php ta muốn nó render vào.

Các bạn có thể test bằng postman, ở đây giao diện mình build chưa đẹp lắm nên mình test bằng cái này, chúc các bạn thành công

Mình xin nhắc lại là, mình chỉ chia sẽ những gì mình biết, nếu trong bài viết có gì thiếu sót mình xin mọi người hãy đóng góp ý kiến cho mình để mình phát triển tốt hơn 😄 Cảm ơn các bạn đã theo dõi .

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo