路由守衛
透過配置 guardedPaths 和 guestPaths,框架自動注入全域路由守衛中介軟體,實現登入攔截和已登入重新導向。
配置
// nuxt.config.ts
swiftConfig: {
auth: {
// 需要登入才能存取的路徑(路徑前綴比對)
guardedPaths: ['/mine', '/dashboard', '/settings'],
// 已登入時不可存取的路徑(如登入頁、註冊頁)
// 已登入使用者存取這些路徑會被重新導向到首頁
guestPaths: ['/login', '/register'],
}
}
守衛行為
| 路徑類型 | 未登入存取 | 已登入存取 |
|---|---|---|
guardedPaths 中的路徑 | 重新導向到 /login?redirect=原路徑 | 正常存取 |
guestPaths 中的路徑 | 正常存取 | 重新導向到 /(首頁) |
| 其他路徑 | 正常存取 | 正常存取 |
路徑比對規則
使用前綴比對:guardedPaths: ['/mine'] 會比對 /mine、/mine/favorites、/mine/settings 等所有以 /mine 開頭的路徑。
登入成功後的重新導向
守衛將原始路徑存入查詢參數 ?redirect=,登入成功後,useLoginBy() 會自動讀取並跳轉到登入前的頁面。
自訂守衛邏輯
如需更複雜的守衛邏輯(如基於角色的權限控制),可在 app/middleware/ 中建立自訂中介軟體:
// app/middleware/auth.global.ts
export default defineNuxtRouteMiddleware(async (to) => {
const userStore = useUserStore()
// 自訂:管理員頁面需要 admin 角色
if (to.path.startsWith('/admin')) {
const loggedIn = await useLoginCheck()
if (!loggedIn) return navigateTo('/login')
if (!userStore.info?.isAdmin) return navigateTo('/')
}
})
安全行為
framework 內建兩條 auth 相關的安全行為,無需額外設定即預設生效:
拒絕 URL 注入的渠道碼
systemStore.initCode()(由 framework 插件在初始化時調用)偵測到 ?switch=1 路徑下從 URL query 注入的渠道碼(?code=...)會被拒絕,
防止惡意分享連結劫持業務渠道歸因。僅站內合法路徑下的渠道碼切換會被接受。
logout 先撤銷伺服器端會話,再同步清理本地狀態
呼叫框架登出流程(userStore.logout())時,會先向後端 POST /login/logout 撤銷當前會話——失敗靜默吞掉、不阻斷登出(網路故障 / 後端未實作該端點時本地照清,零適配成本)——隨後同步清空:
- 渠道碼 cookie(
Set-Cookie: code=; Max-Age=0) - IDB 解密快取(如
useDecryptedAsset快取的解密 blob URL) - 約定登入憑證 localStorage(防止登出後下個使用者登入時拿到上個使用者的憑證殘留)
避免登出殘留資訊洩漏到下個會話或下個使用者,同時保證原 token 在伺服器端立即失效——「使用者已登出」重新成為一道真實防線(對齊 OWASP 會話管理要求)。
延伸閱讀
- 自動登入 + Token 重登流程 — 完整時序圖 + 三種渲染模式行為對照 + 業務側禁忌
- 算繪模式快速指南 — 守衛路徑按頁面類型選 ISR / SSR / CSR 的策略