Đăng ký Đăng nhập sử dụng Laravel + VueJS

Tram Ho

1. Giới thiệu

Xin chào ae mình lại có time quay lại để tiếp tục với seri Vuejs Spa + Laravel authentiaction jwt đây . Bắt đầu luôn nha .

2. Back end (Laravel)

Step 1

  • Tạo project Laravel
    composer create-project --prefer-dist laravel/laravel learning

run comand line :

  • composer install
  • php artisan key:generate
  • cp .env.example .env
  • composer require laravel/ui ( package laravel ui )
  • php artisan ui vue
    chạy xong thì bạn có thể thấy 1 folder component trong resoures/js
  • npm install hoặc yarn install để tả các package về .

Cài đặt package JWT

  • composer require tymon/jwt-auth
  • Tiếp theo mở config/app.php :
    thêm vào provider :
    TymonJWTAuthProvidersLaravelServiceProvider::class,
    thêm vào aliases

sau đó chúng ta publish nó :
php artisan vendor:publish --provider="TymonJWTAuthProvidersLaravelServiceProvider"

Step 2

Đầu tiên tạo 1 controller :

php artisan make:controller api/SinglePageController
Mục đích của Controller này là return về view sử dụng vueJs .

Step 3

Một token sinh ra khi chung ta login sẽ trả về model User. Model User sẽ Implement JWTSubject và update lại model :

Step 4 Update Authentication Middleware

Update them vào middeware Autenticate.php

Step 5

Tiếp theo ta tạo 1 controller để phục vụ cho việc view, create, update
php artisan make:controller api/UserController

Step 6 – Blade

Ném đoạn này vào resources/views/welcome.blade.php

3 Client (VueJs)

Step 1

Clien thì ta sử dụng 2 package là vue-routerwebsanova/vue-auth

Webpack Mix
Mix file js và style vào folder public, mình cũng muốn sử dụng đường dẫn để truy cập đến các component Vue dễ dàng hơn nên mình sẽ dử dụng alias

Bây giờ truy cập các component vue trong thư mục resoure/js thì chỉ cần thay thế bởi đường dẫn @/ là xong

Step 2 – Router

Step 3 – Config vue-auth

Create 1 file user.js ở resources

Step 4 – App

app.js ở đây nó sẽ là file sử dụng chung cho tất cả các component

Step 5

Tạo 1 AppComponent.vue

Step 6

Cần thêm một cái component TopBar để xem người hiện tại đang đăng nhập và thực hiện phần đăng xuất. Component này chỉ có khi hệ thống đã được xác thực bằng hàm v-if=”$auth.check()”

Step 7

Tạo mới 1 RegisterComponent.vue

Step 8

Tiếp theo là LoginComponent.vue

Step 9

Cuối cùng là HomeComponent. Khi login xong, website sẽ chuyển hướng đến trang này