Descripción
useAuth es un composable de Vue que gestiona el estado de autenticación del usuario en la aplicación. Maneja el login, logout, verificación de tokens y acceso a información del usuario autenticado. Utiliza localStorage para la persistencia de sesión.
Importación
import { useAuth } from '@/composables/useAuth'
Uso Básico
Login
Verificar Autenticación
Logout
Obtener Usuario
import { useAuth } from '@/composables/useAuth'
const { login, isAuthenticated } = useAuth()
// Autenticar usuario
const handleLogin = async () => {
const token = 'jwt-token-from-backend'
const email = '[email protected]'
login(token, email)
if (isAuthenticated.value) {
console.log('Usuario autenticado correctamente')
}
}
import { useAuth } from '@/composables/useAuth'
const { checkAuth, isAuthenticated } = useAuth()
// Verificar si existe sesión almacenada
onMounted(() => {
const hasSession = checkAuth()
if (!hasSession) {
router.push('/login')
}
})
import { useAuth } from '@/composables/useAuth'
const { logout } = useAuth()
const handleLogout = () => {
logout()
router.push('/login')
}
import { useAuth } from '@/composables/useAuth'
const { getUser, isAuthenticated } = useAuth()
const user = getUser()
if (user.email && user.token) {
console.log('Email:', user.email)
console.log('Token:', user.token)
}
API
Valores Retornados
Valor computado reactivo que indica si el usuario está autenticado. Retorna true si existe un token válido.
Verifica si existe un token de autenticación en localStorage y actualiza el estado interno.Retorna: boolean - true si existe token, false en caso contrario.
login
(token: string, email: string) => void
Autentica al usuario guardando el token y email en el estado global y localStorage.Parámetros:
token (string) - Token JWT de autenticaciónemail (string) - Email del usuario autenticado
Cierra la sesión del usuario eliminando el token, email y datos de “recordarme” del estado y localStorage.
getUser
() => { email: string | null, token: string | null }
Obtiene los datos del usuario autenticado actual.Retorna: Objeto con las propiedades:
email (string | null) - Email del usuario autenticadotoken (string | null) - Token de autenticación actual
Estado Global
El composable mantiene estado global compartido entre todas las instancias:
authToken - Token de autenticación actualuserEmail - Email del usuario autenticado
Esto garantiza que el estado de autenticación sea consistente en toda la aplicación.
Persistencia
El composable utiliza localStorage para persistir:
authToken - Token de autenticaciónuserEmail - Email del usuariorememberMe - Preferencia de recordar sesión (eliminado al cerrar sesión)
Ejemplo Completo
<script setup lang="ts">
import { useAuth } from '@/composables/useAuth'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const { isAuthenticated, checkAuth, login, logout, getUser } = useAuth()
const email = ref('')
const password = ref('')
// Verificar autenticación al montar
onMounted(() => {
const hasSession = checkAuth()
if (hasSession) {
const user = getUser()
console.log('Sesión activa para:', user.email)
}
})
const handleLogin = async () => {
try {
// Llamar a tu API de autenticación
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({
email: email.value,
password: password.value
})
})
const data = await response.json()
// Autenticar con el token recibido
login(data.token, email.value)
// Redirigir al dashboard
router.push('/dashboard')
} catch (error) {
console.error('Error al autenticar:', error)
}
}
const handleLogout = () => {
logout()
router.push('/login')
}
</script>
<template>
<div v-if="!isAuthenticated">
<input v-model="email" type="email" placeholder="Email" />
<input v-model="password" type="password" placeholder="Contraseña" />
<button @click="handleLogin">Iniciar Sesión</button>
</div>
<div v-else>
<p>Bienvenido, {{ getUser().email }}</p>
<button @click="handleLogout">Cerrar Sesión</button>
</div>
</template>
Notas
- El estado de autenticación es global y se comparte entre todos los componentes que usen
useAuth()
- El token se almacena en texto plano en localStorage - considerar medidas adicionales de seguridad para producción
- Al cerrar sesión se eliminan todos los datos de autenticación incluyendo la preferencia de “recordarme”
checkAuth() debe llamarse al iniciar la aplicación para restaurar sesiones previas
