實戰：整合授權系統

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 流程
• ✅ 完整授權系統