Laravel — Multi Authentication (admin/user)
สำหรับผู้ที่เริ่มทำโปรเจ๊กและเริ่มเรียนรู้ laravel วันนี้นำขั้นตอนการทำระบบหลังบ้านหลัก ที่ถือว่าเป็นขั้นตอนสำคัญขั้นตอนหนึ่งในการพัฒนาแอปพลิเคชั่น นั่นคือระบบจัดการแยกผู้ใช้ระหว่าง ผู้ดูแลระบบ กับ ผู้ใช้ทั่วไป ซึ่งตัว laravel เองมีส่วนจัดการตรงนี้ให้เราเลือกใช้งานหลายรูปแบบด้วยกัน หลายท่านทำแล้วอาจจะ งง งง ไม่สำเร็จ วันนี้เรามาทำไปพร้อมกันครับจะได้นำไปใช้ โดยผมจะวางโค้ดให้ ทุกท่านสามารถคัดลอกแล้วนำไปวางทำตามกันได้เลย จะได้ไม่เสียเวลาพิมพ์ ไปเริ่มกันเลยครับ
ขั้นตอนแรก
ให้ดำเนินการติดตั้ง laravel framework ให้เรียบร้อย ในตัวอย่างนี้ใช้เป็น laravel 12 โดยสมมุติว่าติดตั้งเรียบร้อยแล้ว ทดสอบการทำงานด้วยคำสั่ง php artisan serve ผลการทำงานได้ดังภาพ
ใช้ VS Code เปิดโปรเจ๊กขึ้นมา คลิ๊กเมนู new terminal พิมพ์คำสั่ง
composer require laravel/breeze –devเมื่อเสร็จแล้ว พิมพ์คำสั่ง
php artisan breeze:installทำตามขั้นตอนไปเรื่อยๆ จนถึงขั้นตอนคำสั่ง
npm install
และ
npm run dev
เป็นอันเสร็จสิ้นขั้นตอนติดตั้งทดสอบการทำงาน รัน php artisan serve จะได้หน้าเว็บเปลี่ยนไปจากเดิม โดยมีเมนู login กับ register เพิ่มขึ้นมา ดังภาพ
ผลการทำงานในขั้นตอนนี้แม้ว่าจะ register เป็นใครก็ตามเมื่อ login เข้าสู่ระบบจะพบหน้า dashboard เดียวกัน ยังไม่สามารถแยกความแตกต่างได้
ขั้นตอนแยกผู้ใช้ admin กับ user
เริ่มด้วยการปรับแต่งตาราง users ที่มีอยู่แล้ว โดยเพิ่มฟิลด์ usertype สำหรับแยกผู้ใช ้โดยให้ไปที่เมนูด้านซ้ายของ vs code คลิ๊กไปที่ database/migrations เปิดไฟล์……_create_users_table.php เพิ่มฟิลด์ usertype แทรกเข้าไป ดังตัวอย่างโค้ด
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->string('usertype')->default('user');
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();จากนั้นบน terminal พิมพ์คำสั่ง php artisan migrate:fresh
เปิดดูตาราง users ในฐานข้อมูล จะปรากฏฟิลด์ usertype เพิ่มขึ้นมา
จากนั้นทำการสร้าง middleware ชื่อ Admin ด้วยคำสั่ง
php artisan make:middleware Adminเปิดไฟล์ Admin ซึ่งอยู่ใน app/Http/Middleware จากนั้นเพิ่มโค้ดลงในไฟล์
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
use Illuminate\support\Facades\Auth; //อย่าลืมบรรทัดนี้
class Admin
{
/**
* Handle an incoming request.
*
* @param Closure(Request): (Response) $next
*/
public function handle(Request $request, Closure $next): Response
{
if(Auth::check() && Auth::user()->usertype == 'admin') {
return $next($request);
}
abort(403, 'Unautorised');
}
}ขั้นตอนต่อไป ทำการสร้าง Route โดยเปิดไฟล์ route\web.php เพิ่มคำสั่ง ดังภาพ
<?php
use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AdminController; //อย่าลืมบรรทัดนี้
Route::get('/', function () {
return view('welcome');
});
Route::get('/dashboard', [AdminController::class, 'home']) //ตรงนี้
->middleware(['auth', 'verified'])->name('dashboard');
Route::get('/admin/dashboard', [AdminController::class, 'index']) //และตรงนี้
->middleware(['auth', 'admin'])->name('admin.dashboard');
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});
require __DIR__.'/auth.php';จากนั้นสร้าง controller ชื่อ AdminController ด้วยคำสั่ง
php artisan make:controller AdminControllerเปิดไฟล์ AdminController (อยู่ที่ app\Http\Controllers) เพิ่มข้อมูล ดังภาพ
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\support\Facades\Auth; //อย่าลืมบรรทัดนี้
class AdminController extends Controller
{
public function index(Request $request) {
if($request->user()->usertype == 'admin'){
return view('admin.dashboard');
}
else{
return redirect()->route('dashboard');
}
}
public function home(Request $request) {
if($request->user()->usertype == 'user'){
return view('dashboard');
}
else{
return redirect()->route('admin.dashboard');
}
}
}ต่อไป แก้ไขโค้ดเพิ่มเติมที่ไฟล์ app.php ซึ่งอยู่ที่ bootstrap\app.php ดังนี้
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware): void {
$middleware->alias(['admin'=>App\Http\Middleware\Admin::class, ]);//ตรงนี้
})
->withExceptions(function (Exceptions $exceptions): void {
//
})->create();ขั้นต่อไป เพิ่มโฟลเดอร์ admin และไฟล์ dashboard ลงใน resources\view
จะพบว่าไฟล์ admin\dashboard.blade.php ยังว่างไม่มีข้อมูล ให้คัดลอกโค้ดทั้งหมดใน resources\view\dashboard.blade.php มาใส่ให้เหมือนกันทุกอย่าง และแก้ไขไฟล์ทั้งสองให้มีข้อมูล ดังต่อไปนี้
ไฟล์ admin\dashboard.blade.php
@extends('layouts.app')
@section('content')
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
{{ __("You're logged in! Adminnnnnn") }}
</div>
</div>
</div>
</div>
@endsectionไฟล์ view\dashboard.blade.php
@extends('layouts.app')
@section('content')
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
{{ __("You're logged in! Userrrrr") }}
</div>
</div>
</div>
</div>
@endsectionและแก้ไขไฟล์ app.blade.php ซึ่งอยู่ใน resources\view\layouts\app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
@include('layouts.navigation')
<!-- Page Heading -->
@isset($header)
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endisset
<!-- Page Content -->
<main>
@yield('content') //แค่ตรงนี้ เท่านั้น
</main>
</div>
</body>
</html>เพิ่มตรง ส่วน <main> โดยใส่แค่ @yield(‘content’) เท่านั้น
เป็นอันเสร็จสิ้นขั้นตอน การทำ ทดสอบการทำงาน โดยสมมุติว่าได้ดำเนินการ register ผู้ใช้ 2 คน คนแรกเป็น admin คนที่สองเป็น user ให้เปลี่ยน usertype ของผู้ใช้ที่ชื่อ admin ในตาราง users เป็น admin ดังภาพ (เดิมในตารางค่า default จะเป็น user)
ทดสอบ login ด้วยบัญชีของ admin จะได้หน้า dashboard แสดงข้อความ ดังภาพ
หาก login ด้วยบัญชี user จะได้หน้า dashboard แสดงข้อความต่างกัน ดังภาพ
เป็นอันเสร็จสิ้น ขั้นตอนทำระบบ login สำหรับแยก admin กับ user โดยใช้ laravel\breeze แบบง่ายๆใช้งานได้ และมีความปลอดภัยสูง เนื่องจากใช้ middleware ซึ่งไม่สามารถพิมพ์ route ใส่ตรงๆ มีการ protected ไว้แล้ว หากยังไม่ login จะบังคับให้ไปหน้า login เสมอ น่าสนใจและนำไปใช้งานได้เลยนะครับ สำหรับในครั้งหน้าก็จะมาใส่ theme กันเพื่อให้เห็นการแยก dashboard แบบชัดเจน โดยในวันนี้มีการแอบใช้ layouts ไปบ้างแล้ว
คิดว่าคงมีประโยชน์กับทุกๆท่านที่ต้องการใช้นะครับ ตอนทำอาจ งง งง นิดเพราะ เราทำตาม ลองนั่งไล่กลับไปดูอีกครั้งจะพบว่ามีไม่กี่ขั้นตอนครับ และการทำส่วนแยก admin กับ user นี้ เป็นการทำเพื่อนำไปใช้ ทำแค่ครั้งเดียวเราก็ไม่ต้องทำอีก แฮปปี้ แฮปปี้ นะครับ
admin