如何在 Laravel 中設計登入功能(完整的後端與前端流程)

在現代 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 表單設計，我們已經建立了一個強大且靈活的登入流程。

重點回顧：

1. 後端認證邏輯：設計 AuthenticatedSessionController 處理用戶登入。
2. 前端表單設計：使用 Vue 組件與 Inertia.js 來構建動態登入頁面。
3. 數據庫設計：創建 users 表來存儲用戶的登入資訊。
4. 後端路由與中間件：利用中間件確保用戶登入後才能訪問特定頁面。

這篇文章的步驟詳盡，涵蓋了 Laravel 登入功能的所有關鍵組件，您可以根據您的實際需求進行擴展或調整，從而構建出一個高效且安全的登入系統。接下來會介紹Middleware與Validate。

對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!

大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。

提醒，文章僅供正當的知識參考，文章不負任何責任。