API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth

2056

Đây là tutorial hướng dẫn bạn các bước thực hiện cung cấp 1 authentication cho Vue Single Page Application (SPA) cần xác thực để access API trong Laravel.

Resources cần chuẩn bị:

  • NodeJS 8.9.1
  • Laravel 5.5
  • jwt-auth 0.5.12
  • NPM 5.6.0
  • VueJS 2.5.7
  • Vue-router
  • Vue-axios
  • @websanova/vue-auth

Cài đặt

Tạo một project laravel bằng cách thực hiện command trong terminal

Di chuyển vào thư mục project

Tiếp theo bạn cần cài đặt javascript dependencies bằng cách sử dụng command

Bước tiếp theo cung cấp các config để kết nối database trong file .env và tạo db để sử dụng nếu bạn chưa có. Để tạo 1 db trong Laravel thì dùng lệnh sau:

Lệnh này sẽ tạo cho bạn 1 db với bản userspassword_resets

  Laravel, bạn đã viết đúng?

Tiếp tục là cài đặt một số thư viện Vue mà chúng ta cần.

Tạo một file với tên là App.vue trong resources/assets/js và bỏ vào file nội dung sau:

Tạo 1 file khác với tên Home.vue trong resources/assets/js/components và thêm:

Sau đó replace nội dung resouces/assets/js/app.js với nội dung sau:

Kế tiếp thay đổi content của template resources/views/welcome.blade.php như sau:

Bây giờ chạy thử command

Mở browser và gõ http://localhost:8000. Nếu mọi chuyện ổn thì bạn sẽ thấy homepage nghen. Xong phần cơ bản!

Tạo Vue Components

Tạo file với tên Register.vue trong thư mục resources/assets/js/components với nội dung sau:

Tạo file khác với tên Login.vue trong cùng một thư mục với nội dung sau:

Lại tiếp tục tạo thêm file Dashboard.vue cùng thư mục và thêm:

Sau đó replace content của file resources/assets/js/app.js :

@websanova/vue-auth

Đây là thư viện chịu trách nhiệm xử lý các chứng thực tại client side. Nhiệm vụ của nó là thêm 1 object $auth  với cung cấp một số chức năng trợ giúp như register() xử lý đăng ký người dùng, login() xử lý đăng nhập, user() cho phép truy cập vào dữ liệu người dùng hiện tại, rồi logout() và một vài chức năng khác.

Cài đặt @websanova/vue-auth

Sau đó modify là app.js như thế này:

Đoạn code trên chúng ta đã included thêm thư viện vừa cài và thêm 1 số config cần để hoạt động với nó.

Cấu hình vue-auth để sử dụng trình điều khiển bearer, nó thêm những authen token cho những request header trong quá trình requests, đọc và parse token từ phản hồi của server:

Tùy chọn config vue-auth để sử dụng axios http driver, vì chúng ta đang sử dụng axios cho các http request:

Cấu hình vue-auth để sử dụng driver cho vue-router

Chúng ta cũng thêm tùy chọn meta cho route:

Thuộc tính auth xác định xem cần có sự cho phép access route hay không. True nghĩa là bạn xác định authorization này được quyền access vào dashboard.

Bạn nên xem thêm @websanova/vue-auth để biết cách sử dụng thư viện này nhé. Giờ chạy lệnh:

và truy cập vào dashboard trên browser. Chạy đúng thì nó sẽ redirect bạn đến trang login nha.

Jwt-auth

Tiếp tục chúng ta cần cài đặt thư viện jwt-auth trong laravel, thư viện này xử lý các authentication qua các api của chúng ta.

Chạy dòng lệnh trong terminal sau:

Sau đó add service JWTAuthServceProvider cho mảng providers và JWTAuth facade cho mảng aliases trong config/app.php

Publish thử xem:

Và generate key trong cấu hình được publish bên trên:

Note: Nếu bị lỗi thì bạn check link này xem nhé.

Edit app/Http/Kernel.php để thêm jwt.auth và jwt.refresh

Đăng ký

Trước khi chúng ta đi sâu hơn thì cần phải tạo 1 controller và thêm required route ở routes/api.php

Tạo 1 controller cho authen:

Thêm route

Tạo thêm 1 FormRequest để handle validation cho tất cả registration request nhé:

Mình chỉnh lại RegisterFormRequest một chút:

Bây giờ tiếp tục tạo phương thức sẽ handle các user registration trong AuthController

RegisterFormRequest class đảm bảo mỗi yêu cầu tuân thủ các quy tắc mà chúng ta đã thiết lập trong phương thức rule()Sau đó phương thức register() thu thập các input của user từ biến $requestmã hóa mật khẩu và tiếp tục đưa dữ liệu người dùng vào database.

Quay lại Vue và connect những gì ta đã làm. Đi tới Register.vue file và thêm đoạn code sau ở dưới cùng nhé:

Rồi đăng ký thử xem sao, nếu không có lỗi xảy ra thì bạn sẽ đăng ký được (tất nhiên :v):

Đăng nhập

Quay trở lại AuthController, chúng ta add thêm phương thức login()

Thêm phương thức user()refresh()

Phương thức user() được dùng để fetch data của user trong khi phương thức refresh() là để refresh token hiện tại.

Nối thêm đống code dưới đây trong routes/api.php:

Rồi cho connect với Vue thử xem. Trước hết đi tới Login.vue rồi thêm mớ code bên dưới:

Rồi login thử xem nghen

Đăng xuất

Thêm phương thức logout() trong AuthController

Phương thức này đảm bảo rằng người dùng đăng xuất khỏi ứng dụng và làm mất hiệu lực của authentication token và xóa nó khỏi client side.

Giờ thì add them route trong routes/api.php

Xong thì modify App.vue

Xong rồi thử logout nha anh em:

Tổng kết

Hy vọng không xảy ra lỗi thôi, chúc các bạn làm được. Happy coding!

  Instant AJAX Search với Laravel và Vuejs
SHARE