前言

在前幾篇中，我們已經完成了 AI 建構的前端雛型、整合 Authgear 登入系統。
我們已經設定了所有登入的人員為「觀眾」的身分組。
在 Bolt 生成網頁的時候，已經幫我們製作了三種身分專用的儀表板。

這一篇，我們要聚焦在「觀眾專用的儀表板功能」，讓使用者在登入後可以順利進入專屬頁面，並且解決一些常見的登入導向問題。

---

1. 登入後身分組的設定

一開始，我們遇到的問題是：儀表板頁面顯示「Access Denied」。
在 Bolt 生成儀表板時，也同時想到了若在未登入狀況下進入儀表板時，所應對的方式。

但若是你已經登入，卻還是顯示這個畫面，代表 Authgear 回傳的資料中，只回傳了登入，卻沒有回傳登入的角色。

原因：
Authgear 回傳的使用者資料中，沒有包含 role 欄位。
但我們的頁面邏輯卻依賴 user.role 來決定能否顯示。

解法：
在 AuthContext.tsx 中手動補上角色：

const enrichedUser = {
  ...userInfo,
  role: "audience" // 暫時觀眾身分測試
}

或者，未來也可以考慮從 Authgear metadata 中擴充角色資料。

---

2. 登入後正確導向儀表板

當使用者成功登入後，我們希望他們能自動導向對應的儀表板頁面。為此，我們做了幾件事：

路由設定（App.tsx）

我們在 React Router 中，依照身分設定不同的儀表板路由：

<Route path="/audience-dashboard" element={<AudienceDashboard />} />
<Route path="/band-dashboard" element={<BandDashboard />} />
<Route path="/organizer-dashboard" element={<OrganizerDashboard />} />

登入後導向邏輯（AuthContext.tsx）

當使用者登入後，我們透過 navigate() 函數導向儀表板頁面：

if (user?.role === "audience") {
  navigate("/audience-dashboard", { replace: true });
}

這樣一來，觀眾登入後會直接進入 /audience-dashboard。

---

3. 防止未授權的使用者進入

在儀表板頁面中，我們加上一段權限檢查：

if (user?.role !== "audience") {
  return <div>Access Denied</div>;
}

這樣就能避免未登入或身分不符的使用者誤闖。
當未登入或是身分不符時，顯示 Access Denied，這個才是錯誤訊息正確使用的時間。

---

4. 修正使用者資訊顯示重複的問題

在 Header 中，使用者資訊曾經出現重複的現象，例如顯示兩次帳號。
我們簡化成以下格式，只保留「使用者名稱」與「角色」標籤：

{user && (
  <div className="user-info">
    <span>{user.name}</span>
    <span className="role-tag">{user.role}</span>
  </div>
)}

---

5. 登出後自動跳回首頁

為了改善 UX，我們將登出按鈕加上導向邏輯，避免登出後還停留在儀表板頁面：

await authgear.logout();
setUser(null);
navigate("/", { replace: true });

---

我們來整理一下今天執行的動作：

1. 登入後身分組的設定
   在 AuthContext.tsx 中手動補上身分

   const enrichedUser = {...userInfo, role: "audience"}

2. 登入導向儀表板
   使用 navigate("/audience-dashboard") 將使用者登入後導向觀眾儀表板。

3. 權限檢查
   使用條件式 if (user?.role !== "audience") { ... } 避免非觀眾身分的使用者進入此頁。

4. 登出後導向首頁
   使用 navigate("/", { replace: true }) 在使用者登出後返回首頁。

   （若不設定的話，畫面會回到儀表板，此時因為沒有任何身分，就會顯示 Access Denied）

ex. 使用者角色導向對照表：

• audience 會導向 /audience-dashboard
• band 會導向 /band-dashboard
• organizer 會導向 /organizer-dashboard

最後手動測試一下，多登出＆登入幾次，看看剛才的設定有沒有生效。

---

下一篇預告：手機與桌面版頁面調整

目前的網站架構主要以桌面版為主，接下來我們會開始著手調整畫面，讓手機瀏覽時也能夠清晰、好操作。
我們會示範如何針對手機使用者優化排版、按鈕與互動流程。

敬請期待第九篇：手機頁面與電腦頁面的差異與調整！