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）。