Breeze 是官方推薦的起手套裝，內建有登入、註冊、忘記密碼等常用的用戶功能，令外可以選擇使用 Vue 或者 React 來建立畫面。

首先，Breeze 是用於專案初始化的工具，如果專案已經開發到一半的話怕會有衝突所以不適用，最好建立一個初始化的專案。

再來因為要連結資料庫，必須設定好連線資料庫所需的環境變數，可以參考之前連線資料庫的篇章。

建立基礎專案

用指令載入 Breeze

sail composer require laravel/breeze --dev

接著準備讓套件安裝資料庫模型跟畫面，Laravel 預設是用 Blade 渲染畫面的，不過 Breeze 應用了 Inertia.js 工具
產生可以用 React 或 Vue 撰寫的類前端 App 畫面，可以選擇要產生 Vue 或 React 框架。

個人比較喜歡 React 所以指令會是

sail artisan breeze:install react

備註用 Vue 的指令

sail artisan breeze:install vue

Breeze 安裝好之後接著安裝 Javascript 套件

sail npm install
sail npm run dev

然後跑資料庫遷移(如果還沒跑的話)

sail artisan migrate

成功之後馬上開啟伺服器然後看看註冊畫面吧，網址 http://localhost/register

可以實際註冊，進入Dashboard。
接著可以登出後到 /login 測試登入功能。

架構

來簡單看一下 Breeze 如何產生這些頁面跟功能的

首先看到 routes/auth.php，這裡定義了使用者登入之前的畫面路由與 API ，包含註冊，登入登出，忘記密碼等。

以 Get/login 為例，由 AuthenticatedSessionController 的 create 方法處理請求後回傳登入畫面。 在這之前加上了 guest 這個 middleware，如果請求帶有已登入的資訊，則不回傳畫面值接導向首頁。

Route::get('/login', [AuthenticatedSessionController::class, 'create'])
                ->middleware('guest')
                ->name('login');

看看 AuthenticatedSessionController 的 create 做了什麼

// AuthenticatedSessionController.php
public function create()
    {
        return Inertia::render(
            'Auth/Login',  //resources\js\Pages\Auth\Login.js 畫面元件
            [// 畫面元件的 props
                'canResetPassword' => Route::has('password.request'),
                'status' => session('status'),
            ]
        );
    }

回傳 Inertia.js 渲染的畫面。

這邊簡單說下 Inertia.js 的運作方式，最初連上網站的時候，會回傳一個帶有 Inertia 功能的全頁應用，而這個應用裡所有的 link 都會經過 Inertia 的處理，當點擊 link 時並不會直接跳轉網址而是變成發送一個 XHR 到 Laravel ，並經由 API 回傳 Inertia 渲染的畫面元件，進行畫面的更新。

而說是 API 渲染元件其實有點不太準確，收到請求後 Inertia Render 會將 Vue/React 元件轉換成 JSON 並回傳(不是 Html)，再經由前端的 Inertia 解析後重新渲染部分的畫面，達到類前端 App 的效果，所以實際的渲染還是發生在前端，API 只是提供資料。

另外這個方法前端是沒有路由器的，Laravel 伺服器提供畫面的路由器替代了這部分。

畫面說完看看登入功能的部分

// AuthenticatedSessionController.php
/**
 * Handle an incoming authentication request.
 *
 * @param  \App\Http\Requests\Auth\LoginRequest  $request
 * @return \Illuminate\Http\RedirectResponse
 */
public function store(LoginRequest $request)
{
    $request->authenticate();

    $request->session()->regenerate();

    return redirect()->intended(RouteServiceProvider::HOME);
}

相當精簡，因為自定義了 LoginRequest 對登入功能進行了封裝

// LoginRequest 
/**
 * Attempt to authenticate the request's credentials.
 *
 * @return void
 *
 * @throws \Illuminate\Validation\ValidationException
 */
public function authenticate()
{
    $this->ensureIsNotRateLimited();

    if (! Auth::attempt($this->only('email', 'password'), $this->boolean('remember'))) {
        RateLimiter::hit($this->throttleKey());

        throw ValidationException::withMessages([
            'email' => __('auth.failed'),
        ]);
    }

    RateLimiter::clear($this->throttleKey());
}

不過 LoginRequest 中驗證信箱跟密碼的部分也就 Auth::attempt 一行，其他主要是防止過度頻繁的請求跟誤訊息處理。

Auth::attempt 是 Laravel 原生提供的方法，之後再詳細介紹。

其他身分驗證相關的控制器也是差不多的感覺，主要功能都是應用 Laravel 的原生方法。

除了路由跟控制器外主要就是 app/resources 的內容，也就是 React 畫面跟元件等等，相當多。

稍微展開 Pages 資料夾

另外還有些測試

References

Laravel Sarter Kits