useLoginBy()

useLoginBy() 回傳一個登入觸發函數，由呼叫方按需執行（通常繫結到 <button @click>）。 觸發時根據 UA 自動判斷彈窗登入（useLoginDialog）或頁面跳轉登入（navigateTo('/login')）， 也可強制指定其中一種。

注意：本 composable 不是 setter 風格（沒有 loginBy: Ref / setLoginBy()）； 它在每次呼叫時回傳一個立即可呼叫的「登入動作函數」。命名 "useLoginBy" 是「以哪種方式登入」 而不是「切換登入方式」。

基本用法（推薦：Auto 自動判斷）

<script setup lang="ts">
const triggerLogin = useLoginBy() // 預設 'Auto'
</script>

<template>
  <button @click="triggerLogin()">登入</button>
</template>

Auto 模式按 UA 自動路由：

• 桌面端 → 彈窗（更好的桌面互動）
• Android / iOS WebView → 跳轉（WebView 彈窗體驗差）
• 6 大主流瀏覽器（Chrome / Safari / Edge / Firefox / Opera / Samsung Internet）→ 彈窗
• 國產瀏覽器 / 微信 WebView / QQ / UC / MIUI / Vivo / Oppo / Quark / 360 / Sogou → 跳轉（這類環境 影片接管風險高，彈窗常被攔截）
• 其它行動瀏覽器 → 跳轉（保守兜底）

強制彈窗（桌面端側欄登入按鈕）

const loginDialog = useLoginBy('Dialog')
loginDialog() // 立即顯示登入彈窗

適合「已知是桌面環境，無需自動判斷」的場景。

強制跳轉（公眾號 / WebView 內）

const goLogin = useLoginBy('Redirect')
goLogin() // 立即 navigateTo('/login?redirect=<current-path>')

跳轉目標 /login 是框架固定約定路徑（不可設定；starter 模板對應 app/pages/login.vue，auth.guestPaths 預設含 /login）。跳轉 URL 帶 redirect query 參數，登入頁可讀 useRoute().query.redirect 回跳：

// /login 頁面
const router = useRouter()
const redirect = useRoute().query.redirect as string | undefined

async function onLoginSuccess() {
  await navigateTo(redirect || '/')
}

參數

回傳值

注意事項

• 不是響應式狀態：回傳的是函數，不是 Ref。每次呼叫 useLoginBy() 回傳一個新的觸發函數。 如果業務需要「切換」登入方式（使用者偏好選擇），應自行用 useState/localStorage 管理狀態， 把 state 傳給每次 useLoginBy(state.value)。
• redirect query 自動寫入：Redirect 模式 navigateTo({ path: '/login', query: { redirect: useRoute().fullPath } }) 自動捕獲當前路徑，業務無需手動建構。
• WebView 偵測兜底：UA 形如 Version/4.0 Chrome/X.Y 的定製 WebView（不帶 ; wv 標記）也會被 正確識別為 WebView 走跳轉。
• 與 useLoginDialog 配套：Dialog 模式內部讀取 useLoginDialog() 的全域 visible 狀態來控制 彈窗顯示，業務需在 app 根版面掛載 <SwLoginDialog>（或自訂彈窗元件訂閱該 visible）。