useAuth

Composable para gestionar la autenticación de usuarios

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

import { useAuth } from '@/composables/useAuth'

const { login, isAuthenticated } = useAuth()

// Autenticar usuario
const handleLogin = async () => {
  const token = 'jwt-token-from-backend'
  const email = '[e-mail]'
  
  login(token, email)
  
  if (isAuthenticated.value) {
    console.log('Usuario autenticado correctamente')
  }
}

Verificar Autenticación

import { useAuth } from '@/composables/useAuth'

const { checkAuth, isAuthenticated } = useAuth()

// Verificar si existe sesión almacenada
onMounted(() => {
  const hasSession = checkAuth()
  
  if (!hasSession) {
    router.push('/login')
  }
})

Logout

import { useAuth } from '@/composables/useAuth'

const { logout } = useAuth()

const handleLogout = () => {
  logout()
  router.push('/login')
}

Obtener Usuario

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

isAuthenticated · ComputedRef<boolean>

Valor computado reactivo que indica si el usuario está autenticado. Retorna true si existe un token válido.

checkAuth · () => boolean

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ón
• email (string) - Email del usuario autenticado

logout · () => void

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 autenticado
• token (string | null) - Token de autenticación actual

Estado Global

El composable mantiene estado global compartido entre todas las instancias:

• authToken - Token de autenticación actual
• userEmail - 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ón
• userEmail - Email del usuario
• rememberMe - 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