Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 15: การใช้ Middleware ใน Component – การใช้ Middleware เพื่อควบคุมการเข้าถึง

รายละเอียด

Middleware เป็นกลไกใน Laravel ที่ช่วยจัดการ การตรวจสอบ และ การกรองการเข้าถึง ก่อนที่ผู้ใช้จะเข้าถึงส่วนต่าง ๆ ของแอปพลิเคชัน Livewire Component ก็สามารถใช้ Middleware เพื่อควบคุมการเข้าถึงได้ เช่น การตรวจสอบการล็อกอิน การตรวจสอบสิทธิ์ หรือการกรองข้อมูล Middleware สามารถเพิ่มความปลอดภัยและปรับปรุงประสบการณ์การใช้งานโดยการป้องกันการเข้าถึงที่ไม่ได้รับอนุญาต

การใช้ Middleware ใน Livewire Component

การกำหนด Middleware ให้ Component ใน Livewire คุณสามารถใช้ Middleware กับ Component โดยกำหนดในฟังก์ชัน boot หรือใช้ใน Controller ที่เรียก Component

ตัวอย่าง Component:

1
php artisan make:livewire SecuredComponent

ในไฟล์ SecuredComponent.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class SecuredComponent extends Component
{
    public function mount()
    {
        // Middleware สำหรับตรวจสอบการล็อกอิน
        if (!auth()->check()) {
            abort(403, 'Unauthorized');
        }
    }
 
    public function render()
    {
        return view('livewire.secured-component');
    }
}

การใช้ Middleware ผ่าน Route คุณสามารถกำหนด Middleware ให้ Component ผ่าน Route ได้ โดยใช้ Route::group หรือกำหนด Middleware สำหรับ Route ที่เรียกใช้ Component

ตัวอย่าง:

1
2
3
4
5
use App\Http\Livewire\SecuredComponent;
 
Route::middleware(['auth'])->group(function () {
    Route::get('/secured', SecuredComponent::class)->name('secured');
});

การสร้าง Middleware สำหรับ Component หากต้องการสร้าง Middleware แบบกำหนดเอง ให้ใช้คำสั่ง:

1
php artisan make:middleware CheckUserRole

ในไฟล์ CheckUserRole.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
namespace App\Http\Middleware;
 
use Closure;
use Illuminate\Http\Request;
 
class CheckUserRole
{
    public function handle(Request $request, Closure $next, $role)
    {
        if (!auth()->check() || auth()->user()->role !== $role) {
            abort(403, 'Unauthorized');
        }
 
        return $next($request);
    }
}

เพิ่ม Middleware ใน Kernel.php:

1
2
3
protected $routeMiddleware = [
    'check.role' => \App\Http\Middleware\CheckUserRole::class,
];

ใช้ Middleware ใน Route ที่เรียก Component:

1
2
3
Route::get('/admin', \App\Http\Livewire\AdminDashboard::class)
    ->middleware('check.role:admin')
    ->name('admin.dashboard');

การแสดง View เมื่อการเข้าถึงถูกปฏิเสธ เมื่อผู้ใช้ถูกปฏิเสธการเข้าถึง (เช่น abort(403) หรือ Middleware ปฏิเสธ) Laravel จะเรียก View ที่กำหนดไว้ใน errors/403.blade.php:

1
2
<h1>Access Denied</h1>
<p>You do not have permission to access this page.</p>

    ตัวอย่างการใช้งาน Middleware ใน Component

    สร้าง Component สำหรับหน้า Admin Dashboard

    สร้าง Component:

    1
    php artisan make:livewire AdminDashboard

    ใน AdminDashboard.php:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <?php
     
    namespace App\Http\Livewire;
     
    use Livewire\Component;
     
    class AdminDashboard extends Component
    {
        public function mount()
        {
            if (!auth()->user() || auth()->user()->role !== 'admin') {
                abort(403, 'Unauthorized');
            }
        }
     
        public function render()
        {
            return view('livewire.admin-dashboard');
        }
    }

    ใน View (admin-dashboard.blade.php):

    1
    2
    3
    <div>
        <h1>Welcome to Admin Dashboard</h1>
    </div>

    กำหนด Route:

    1
    2
    3
    Route::get('/admin', \App\Http\Livewire\AdminDashboard::class)
        ->middleware('auth')
        ->name('admin.dashboard');

      การนำไปใช้งาน

      Middleware เหมาะสำหรับ:

      • การควบคุมการเข้าถึงส่วนต่าง ๆ ของแอป เช่น หน้า Admin, หน้า Dashboard
      • การตรวจสอบสิทธิ์ของผู้ใช้ เช่น Role-based Access Control (RBAC)
      • การกำหนดเงื่อนไขเฉพาะ เช่น การตรวจสอบสถานะบัญชี

      ประโยชน์ของการใช้ Middleware ใน Livewire Component

      • เพิ่มความปลอดภัยและป้องกันการเข้าถึงที่ไม่ได้รับอนุญาต
      • ช่วยลดโค้ดซ้ำซ้อนในการตรวจสอบสิทธิ์
      • สามารถกำหนดการเข้าถึงได้อย่างยืดหยุ่นและง่ายต่อการจัดการ