useLoginCheck()
useLoginCheck() 是 framework 鑑權體系的核心 composable。在業務操作前呼叫,未登入時按 mode 自動引導使用者(頁面跳轉或彈窗),已登入直接放行。
簽名:useLoginCheck(options?): Promise<boolean> —— 直接回傳 Promise(已登入 true / 未登入 false);不是回傳包含 isLoggedIn 的物件。
基本用法
<script setup lang="ts">
async function submitComment() {
// 未登入時跳轉 /login?redirect=當前路徑,已登入回傳 true
if (!(await useLoginCheck())) return
await request('/comment/add', { body: { content: text.value } })
}
</script>
彈窗模式(桌面端推薦)
桌面端點讚、收藏等不希望「跳走」的輕互動,用彈窗登入:
<script setup lang="ts">
const { open } = useLoginDialog()
async function onLike() {
if (!(await useLoginCheck({ mode: 'dialog', openDialog: open }))) return
await request('/like/toggle', { body: { id } })
}
</script>
強制登入後不回到原頁
敏感操作(如修改 email 後跳首頁確認資訊)用 redirectBack: false:
await useLoginCheck({ redirectBack: false })
參數
| 參數 | 類型 | 預設 | 說明 |
|---|---|---|---|
mode | 'page' | 'dialog' | 'page' | 未登入時的引導方式:page 跳轉 /login;dialog 呼叫 openDialog 彈窗 |
redirectBack | boolean | true | 登入後是否帶 ?redirect=當前路徑 回傳(mode: 'page' 時有效) |
openDialog | () => void | — | mode: 'dialog' 時呼叫此函式開啟彈窗。通常傳 useLoginDialog() 的 open |
回傳值
Promise<boolean>——true= 已登入,可繼續業務;false= 未登入,已自動引導(頁面已跳轉或彈窗已開啟),呼叫方應 early return
直接回傳
Promise<boolean>,不是物件。當前簽名見原始碼src/runtime/composables/useLoginCheck.ts。
與全域響應式登入狀態的關係
判斷「使用者當前是否已登入」用 useUserStore() 的 isLoggedIn(響應式 ref,跨標籤頁 cookie 同步):
<template>
<div v-if="userStore.isLoggedIn">
<UserProfile />
</div>
<div v-else>
<NuxtLink to="/login">請登入後查看</NuxtLink>
</div>
</template>
<script setup lang="ts">
const userStore = useUserStore()
</script>
useLoginCheck() 是一次性副作用(「未登入就引導」),不要在模板裡 await 它當響應式狀態用。
與路由守衛的關係
framework 內建的 login.global middleware 不呼叫 useLoginCheck(),而是直接讀 userStore.isLoggedIn 判斷(更輕量,無副作用)。守衛路徑在 nuxt.config.ts 的 swiftConfig.auth.guardedPaths 配置:
// nuxt.config.ts
export default defineNuxtConfig({
swiftConfig: {
auth: {
guardedPaths: ['/mine', '/profile', '/settings'],
guestPaths: ['/login', '/register'],
},
},
})
useLoginCheck() 主要服務於業務側細粒度引導(具體操作前檢查),不是 middleware 替代品。
相關
useLoginDialog()— 彈出登入彈窗,配合mode: 'dialog'使用useLoginBy()— 智慧登入方式選擇(Android WebView / iOS / 桌面端按 UA 分流)userStore.isLoggedIn— 全域響應式登入狀態- auth ModuleOptions — 路由守衛 + client auth init 配置
注意事項
- 必須
await,否則後續業務在登入未完成時就跑了(Rule UL-001)—— 回傳Promise<boolean>(true=已登入 / false=未登入且已跳轉登入頁或已彈登入框)。不 await 會導致拿到 null userInfo、向後端發未認證請求、或出現「先報錯後跳登入頁」的怪現象。標準寫法if (!(await useLoginCheck())) return。 - TS 的
no-floating-promises只兜住一部分 —— 條件分支裡的巢狀呼叫、忘記給外層函式加async等場景仍會漏,寫的時候自己多看一眼。 - 它與
useLoginDialog()語意完全不同 —— 本函式做登入判斷(已登入直接放行);useLoginDialog()只切彈窗顯隱、不判斷(見 Rule ULD-001)。要「未登入才攔 + 等結果」一律用本函式。