Documentation Index
Fetch the complete documentation index at: https://mintlify.com/joaoelian204/Portal-Ciudadano-Manta-web/llms.txt
Use this file to discover all available pages before exploring further.
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 = 'usuario@ejemplo.com'
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
