iT邦幫忙

2024 iThome 鐵人賽

DAY 19
0
自我挑戰組

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

DAY 19 - resume builder 登出功能與navbar

  • 分享至 

  • xImage
  •  

哈囉大家好~
昨天簡單介紹了登入功能的程式碼,今天要來分享登出功能!
那就馬上開始吧~

首先登入後會進入dashboard的畫面,畫面最上方會有一個navbar,登出的按鈕在最右邊,按下按鈕後使用者就會登出,並回到登入頁面:
https://ithelp.ithome.com.tw/upload/images/20240919/20168986GtaqtoFnDk.png

首先要先創建navbar component並完成介面:(navbar.blade.php)

<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
        <div class="container">
            <a class="navbar-brand" href="/dashboard">
            <img src="/images/meme.jpg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
                Resume Builder
            </a>
            
            <form class="d-flex" action="{{ route('logout') }}" method="POST">   
                <button class="btn btn-light" type="submit">Logout</button>
            </form>
        </div>
    </nav>

然後再到NavbarController處理登出的邏輯:

<?php
namespace App\Http\Controllers;

use Illuminate\Support\Facades\Auth;

class NavbarController extends Controller
{
    public function logout() // 登出
    {
        Auth::logout();
        session()->flash('status', '已成功登出!'); 
        return redirect('/'); // 回到登入畫面
    }
}

因為我想要讓使用者登出後可以看到“成功登出”的提示訊息,所以再重新導向畫面回到登入畫面前,將'status'這個變數與其值儲存在session中:

session()->flash('status', '已成功登出!'); 

然後回到登入頁面添加顯示提示訊息的程式碼:

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

接著定義我們需要的路徑(web.php):

Route::post('/logout', [NavbarController::class, 'logout'])->name('logout');

這裡會對應到前面登出form標籤裡的action="{{ route('logout') }}"

嘗試按下登出按鈕⋯⋯do re mi so!
https://ithelp.ithome.com.tw/upload/images/20240919/2016898623qsrVowLW.png


小專案的登入和登出部分就到這邊告一個段落了~
接下來要來實現增刪查改的功能!感覺下班後要一邊學一邊整理文章真的好趕啊(加上我還要耍廢/images/emoticon/emoticon02.gif
明天還是要順利完成發文任務~~/images/emoticon/emoticon76.gif


上一篇
DAY18 - resume builder 登入畫面與功能 (下)
下一篇
DAY20 - Resume builder: 創建填寫表單
系列文
PHP框架-Laravel自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言