在現代 Web 應用中，實現用戶登入功能是非常基本且重要的步驟。本文將帶您了解如何在 Laravel 中構建一個完整的登入系統，涵蓋後端處理邏輯、前端表單設計以及相關的路由和中間件設定。這篇指南旨在幫助您建立一個簡潔且可擴展的登入流程。
1. 後端路由與控制器設置
在 Laravel 中，所有的路由配置都可以在 web.php 文件中進行設置，這樣我們就可以輕鬆控制用戶登入的流程。
web.php 路由設定
use App\Http\Controllers\Auth\AuthenticatedSessionController;
use Illuminate\Support\Facades\Route;
Route::prefix('admin')->middleware(['auth'])->group(function () {
// 登入後才可訪問的管理頁面
Route::get('/', function () {
return Inertia::render('Backend/Dashboard');
})->name('dashboard');
});
// 登入頁面路由，未登入者才可訪問
Route::get('login', [AuthenticatedSessionController::class, 'create'])->name('login');
Route::post('login', [AuthenticatedSessionController::class, 'store']);
在這裡，我們為登入頁面和登入請求設置了路由。需要注意的是，對於需要登入才能訪問的頁面，我們使用了 middleware(['auth']) 來限制訪問。
2. 創建登入表單：Vue 組件
接下來，我們需要在前端創建一個 Vue 組件來處理用戶登入表單。這裡我們將使用 Laravel Inertia.js 來構建前端與後端的協作。
Login.vue 登入頁面
<script setup>
const form = useForm({
email: '',
password: '',
remember: false,
});
const submit = () => {
form.post(route('login'), {
onFinish: () => form.reset('password'),
});
};
</script>
<template>
<form @submit.prevent="submit">
<input type="email" v-model="form.email" placeholder="Enter your email" required>
<input type="password" v-model="form.password" placeholder="Enter your password" required>
<label>
<input type="checkbox" v-model="form.remember">
Remember me
</label>
<button type="submit">Login</button>
</form>
</template>
在這個 Vue 組件中，我們使用了 useForm 來管理表單狀態，並將表單提交到 login 路由。使用 @submit.prevent="submit" 可以避免頁面刷新，並且觸發登入的請求。
小細節
- 請記得將
<button>元素的type設為submit，這樣表單才能正常提交。 useForm是 Laravel Inertia.js 中的一個很有用的工具，可以簡化表單處理的流程。
3. 認證控制器邏輯
在後端，我們需要創建一個控制器來處理登入請求和用戶的身份驗證。這裡我們將設計 AuthenticatedSessionController 控制器來實現這個功能。
AuthenticatedSessionController.php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Http\Requests\Auth\LoginRequest;
use Illuminate\Http\RedirectResponse;
use Illuminate\Support\Facades\Auth;
use Inertia\Inertia;
use Inertia\Response;
class AuthenticatedSessionController extends Controller
{
/**
* 顯示登入頁面
*/
public function create(): Response
{
return Inertia::render('Auth/Login', [
'canResetPassword' => Route::has('password.request'),
'status' => session('status'),
]);
}
/**
* 處理登入請求
*/
public function store(LoginRequest $request): RedirectResponse
{
// 確認信箱和密碼
$request->authenticate();
// 生成新的 session
$request->session()->regenerate();
// 重定向到用戶目標頁面
return redirect()->intended(RouteServiceProvider::HOME);
}
}
控制器功能解析
create()方法：顯示登入頁面。store()方法：處理用戶的登入邏輯，包括驗證用戶的信箱與密碼，並且在登入成功後生成 session。
這裡的 authenticate() 是在 LoginRequest 類中定義的，它會確保用戶的帳號和密碼正確。
4. 數據庫與用戶模型設計
為了支持登入功能，需要一個 users 表來儲存用戶信息。這部分設置通常可以通過 Laravel 的 migration 機制來實現。
create_users_table.php Migration 文件
public function up(): void
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
在這個 migration 中，我們設置了 email 和 password 字段來儲存用戶的登入信息，同時加入了 rememberToken 以支持記住我功能。
5. 後端管理路由及中間件設置
在您的管理後臺頁面中，您可能會希望只有經過認證的用戶才能進入。這就需要使用 auth 中間件來限制未登入的用戶訪問。
backend.php 管理後台路由
Route::prefix('admin')->middleware(['auth', 'verified'])->group(function () {
Route::get('/', function () {
return Inertia::render('Backend/Dashboard');
})->name('dashboard');
});
在這個例子中，我們為 admin 路由設置了 auth 和 verified 中間件，這樣只有經過身份驗證且已驗證 email 的用戶才能訪問管理頁面。
6. 總結
透過這些步驟，您可以在 Laravel 中構建一個完整的登入系統。從後端的路由設定、控制器邏輯，到前端的 Vue 表單設計，我們已經建立了一個強大且靈活的登入流程。
重點回顧：
- 後端認證邏輯：設計
AuthenticatedSessionController處理用戶登入。 - 前端表單設計：使用 Vue 組件與 Inertia.js 來構建動態登入頁面。
- 數據庫設計：創建
users表來存儲用戶的登入資訊。 - 後端路由與中間件：利用中間件確保用戶登入後才能訪問特定頁面。
這篇文章的步驟詳盡，涵蓋了 Laravel 登入功能的所有關鍵組件，您可以根據您的實際需求進行擴展或調整，從而構建出一個高效且安全的登入系統。接下來會介紹Middleware與Validate。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。
提醒，文章僅供正當的知識參考，文章不負任何責任。
