實戰：整合授權系統

Vibe Prompt

「幫我用 Supabase + Next.js 建立完整授權系統：Google 登入、RBAC 權限、Middleware 保護。」

完整範例

// middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

// 需要登入的路由
const protectedRoutes = ['/dashboard', '/courses/*']
const adminRoutes = ['/admin', '/admin/*']

export async function middleware(req) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient({ req, res })
  const { data: { session } } = await supabase.auth.getSession()
  
  const path = req.nextUrl.pathname
  
  // 保護路由
  if (protectedRoutes.some(p => path.match(p))) {
    if (!session) {
      return NextResponse.redirect(new URL('/login', req.url))
    }
  }
  
  // 管理員路由
  if (adminRoutes.some(p => path.match(p))) {
    const { data: { user } } = await supabase.auth.getUser()
    const role = user?.user_metadata?.role
    if (role !== 'admin') {
      return NextResponse.redirect(new URL('/dashboard', req.url))
    }
  }
  
  return res
}

// dashboard/page.tsx
import { createServerClient } from '@/utils/supabase/server'

export default async function DashboardPage() {
  const supabase = createServerClient()
  const { data: { user } } = await supabase.auth.getUser()
  
  // 從 user_metadata 取得角色
  const role = user?.user_metadata?.role || 'viewer'
  
  return (
    <div>
      <h1>Dashboard</h1>
      <p>歡迎, {user?.email}</p>
      <p>角色: {role}</p>
      {role === 'admin' && <AdminPanel />}
      {role === 'editor' && <EditorPanel />}
    </div>
  )
}

課程總結

IAM 課程完成！

• ✅ OAuth 2.0 / OIDC
• ✅ RBAC / ABAC
• ✅ Session 管理
• ✅ PKCE 流程
• ✅ 完整授權系統

本章總結

• 理解核心概念與原理
• 掌握實作方法與技巧
• 熟悉常見問題與解決方案
• 能夠應用於實際專案

延伸閱讀

• 官方文件與 API 參考
• GitHub 開源專案範例
• 相關技術書籍與課程
• 社群討論與技術部落格

實作範例

基礎範例

# 本節提供一個完整的實作範例
# 讓你能夠將所學應用到實際專案中

步驟說明

1. 初始化：設定開發環境與必要工具
2. 資料準備：收集與整理所需資料
3. 核心實作：實作主要功能與邏輯
4. 測試驗證：確保功能正確運作
5. 最佳化：調整效能與使用者體驗

常見錯誤

| 錯誤類型 | 可能原因 | 解決方法 | |---------|---------|---------| | 編譯錯誤 | 語法問題 | 檢查程式碼語法 | | 執行錯誤 | 環境問題 | 確認相依套件已安裝 | | 邏輯錯誤 | 演算法問題 | 逐步除錯與測試 | | 效能問題 | 效率問題 | 使用效能分析工具 |

程式碼範例

# 範例程式碼
import sys

def main():
    # 主程式邏輯
    print("Hello, World!")

if __name__ == "__main__":
    main()

相關資源

• 官方文件
• API 參考手冊
• 開源專案範例
• 技術社群討論