iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0
自我挑戰組

PHP框架-Laravel自學挑戰系列 第 29

DAY 29 - resume builder: 程式碼優化-使用者登入狀態檢查

  • 分享至 

  • xImage
  •  

哈囉大家好~
今天是鐵人賽的倒數第二天了!目前小專案也告一個段落,所以想要來優化一下程式碼~
那就馬上開始吧!

在登入後的頁面,之前都沒有確認切換到該頁面時,使用者是否已經是登入狀態。
在livewire component的render function中,不支援切換路徑的redirect() method(因為livewire component的功能為渲染前端畫面),所以要再次利用livewire lifecycle Hook-mount()來做登入狀態檢查。
mount() function會在component初始化時先被進行呼叫(在render() function被呼叫之前),所以把檢查狀態的程式碼寫在mount() function裡面(下方以dashboard頁面為例):

public function mount()
    {
        if (!Auth::check()) {
            session()->flash('notLogin', 'Please login first!');
            return redirect()->route('login');
        }
    }
    
public function render()
    {
            $githubUser = Auth::user();
            
            $github_email = $githubUser->email;
            $resumes = Resume::where('github_email', $github_email)->get();
            return view('livewire.dashboard', ['githubUser' => $githubUser, 'resumes' => $resumes]);
    
    }

這裡路徑的名稱對應該路徑在web.php中的設定:

Route::get('/', Login::class)->name('login');

在dashboard頁面中新增mount() function,
這裡透過check() function檢查,若使用者尚未登入,則會將畫面切回登入頁面,並顯示"please login first",並且在原本login的前端頁面加上判斷訊息是否顯示的程式碼:

@if(session('notLogin'))
                <div class="alert alert-danger">
                    {{ session('notLogin') }}
                </div>
@endif

若使用者在未登入的狀態下訪問"/dashboard"這個路徑,則會看到以下畫面:
https://ithelp.ithome.com.tw/upload/images/20240929/20168986zGNFe1GrkW.png

但如果我有好多頁面要檢查的話,會變得非常麻煩,需要在每個頁面都手動加入同樣的程式碼⋯⋯
如果我想要一次處理所有的頁面,就會需要用到middleware來幫忙!
透過middleware處理登入檢查,我就不用在每個頁面都手動處理,middleware會自動做判斷檢查。

首先,要使用laravel內建的auth middleware,在需要檢查的路徑中調整程式碼如下:
(這裡用create page為例)

Route::middleware(['auth'])->group(function() {
    Route::get('/create', CreateResume::class);
});

接著在create page component中直接使用middleware:

<?php

namespace App\Livewire;

use App\Models\Resume;
use Illuminate\Support\Facades\Auth;
use Livewire\Attributes\Validate;
use Livewire\Component;

class CreateResume extends Component
{
    // 省略其他程式碼...

    protected $middleware = ['auth']; // 利用middleware保護這個component

    //省略其他程式碼...
       

    public function render()
    {
        return view('livewire.create-resume');
    }
}

最後再設定未登入使用者要切回的畫面(也就是登入畫面)。可以在app/Http/Middleware路徑中找到預設的Authenticate.php,這裡的middleware就是負責沒有登入的使用者後續處理。
這裡會在程式碼中撰寫欲切回的路徑:

<?php

namespace App\Http\Middleware;

use Illuminate\Auth\Middleware\Authenticate as Middleware;

class Authenticate extends Middleware
{
    
    protected function redirectTo($request)
    {
        if (! $request->expectsJson()) {
            session()->flash('notLogin', 'Please login first!');
            return route('login'); // 回到登入畫面
        }
    }
}

之後在未登入的狀態下訪問/create,就會自動切回登入畫面!
比起第一種方式,第二種透過middleware檢查登入狀態的情況下,只需要調整路徑以及在需要保護的component中新增middleware,需要撰寫的程式碼較少也減少了重複程式碼的撰寫~


明天就是鐵人賽的最後一天了!時間真的過得好快啊~~
實做小專案的部分就在這裡先暫時劃下句點了/images/emoticon/emoticon02.gif
明天想要來分享這次參加鐵人賽的心得!
那就明天見囉 8181~


上一篇
DAY 28 - resume builder: 將resume更新至GitHub README (下)發送PUT request
下一篇
DAY 30 - 完結撒花!鐵人賽完賽心得分享
系列文
PHP框架-Laravel自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言