Luxx/dashboard/src/utils/useAuth.js

78 lines
1.6 KiB
JavaScript

/**
* 认证状态管理组合式函数
*/
import { ref, onMounted, onUnmounted } from 'vue'
export function useAuth() {
const isLoggedIn = ref(false)
const user = ref(null)
const loading = ref(true)
// 检查登录状态
const checkAuth = () => {
isLoggedIn.value = !!localStorage.getItem('access_token')
if (isLoggedIn.value) {
const userData = localStorage.getItem('user')
if (userData) {
try {
user.value = JSON.parse(userData)
} catch {
user.value = null
}
}
} else {
user.value = null
}
}
// 登录
const login = (token, userData) => {
localStorage.setItem('access_token', token)
localStorage.setItem('user', JSON.stringify(userData))
isLoggedIn.value = true
user.value = userData
window.dispatchEvent(new CustomEvent('auth-change'))
}
// 登出
const logout = async (api) => {
try {
if (api) await api.logout()
} catch (e) {
console.error('登出失败:', e)
}
localStorage.removeItem('access_token')
localStorage.removeItem('user')
isLoggedIn.value = false
user.value = null
window.dispatchEvent(new CustomEvent('auth-change'))
}
// 获取 Token
const getToken = () => localStorage.getItem('access_token')
// 监听认证变化
const handleAuthChange = () => {
checkAuth()
}
onMounted(() => {
checkAuth()
window.addEventListener('auth-change', handleAuthChange)
})
onUnmounted(() => {
window.removeEventListener('auth-change', handleAuthChange)
})
return {
isLoggedIn,
user,
loading,
checkAuth,
login,
logout,
getToken
}
}