Vue 3组合式API管理登录状态的核心是用ref和reactive分离表单字段与整体状态，并通过useAuth自定义Hook封装登录逻辑，实现响应式、可复用、易测试的认证流程。
在 Vue 3 中结合组合式 API 管理登录状态，核心是把“用户数据”、“登录逻辑”和“响应式状态”封装在 setup() 或自定义 Hook 中，避免 Options API 的 this 混乱，也便于复用和测试。
用 ref 和 reactive 管理表单与状态
登录表单字段（如 username、password）建议用 ref，因为它们是独立的简单值；而整体表单状态（如 loading、error、isLogin）可用 reactive 统一管理，语义更清晰：
import { ref, reactive } from 'vue'
export default {
setup() {
const username = ref('')
const password = ref('')
const formState = reactive({
loading: false,
error: '',
isLogin: false
})
// 提交函数后续定义...
return { username, password, formState }
}
}
封装登录逻辑为可复用的组合函数
把请求、token 存储、错误处理抽成 useAuth 这类自定义 Hook，让登录逻辑与组件解耦：
// composables/useAuth.js
import { ref, reactive } from 'vue'
import { loginApi } from '@/api/auth'
export function useAuth() {
const user = ref(null)
const token = ref(localStorage.getItem('token') || '')
const state = reactive({
loading: false,
error: ''
})
const login = async (credentials) => {
state.loading = true
state.error = ''
try {
const res = await loginApi(credentials)
token.value = res.token
user.value = res.user
localStorage.setItem('token', res.token)
return true
} catch (err) {
state.error = err.response?.data?.message || '登录失败，请重试'
return false
} finally {
state.loading = false
}
}
const logout = () => {
token.value = ''
user.value = null
localStorage.removeItem('token')
}
return {
user,
token,
...state,
login,
logout
}
}
在组件中调用并绑定表单提交
在登录组件中引入 useAuth，把表单 ref 和登录函数连接起来。注意使用 async/await + preventDefault 控制提交行为：
立即学习“前端免费学习笔记（深入）”；
<template>
<form @submit="handleSubmit">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit" :disabled="loading">
{{ loading ? '登录中...' : '登录' }}
</button>
<div v-if="error" class="error">{{ error }}</div>
</form>
</template>
<script setup>
import { ref } from 'vue'
import { useAuth } from '@/composables/useAuth'
const username = ref('')
const password = ref('')
const { login, loading, error } = useAuth()
const handleSubmit = async (e) => {
e.preventDefault()
await login({ username: username.value, password: password.value })
}
</script>
配合路由守卫做登录后跳转
登录成功后通常要跳转（比如回到原页面或首页），可在 useAuth.login() 返回 true 后调用 router.push()。推荐在组件内处理跳转逻辑，保持 Hook 纯净：
- 在登录组件中 import
useRouter，登录成功后router.push(redirect || '/') - 从 URL 查询参数（如
?redirect=/profile）读取目标路径，避免硬编码 - 全局路由守卫（
router.beforeEach）检查 token 是否存在，缺失则重定向到登录页
