Autenticación JWT: inicio de sesión y renovación
Flujo de token de acceso y token de renovación, cookies httpOnly y renovación silenciosa con interceptores
Autenticación JWT: inicio de sesión y renovación es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Modelo de tokens de acceso y actualización
Un esquema JWT sólido utiliza dos tokens: un token de acceso de corta duración (minutos), que se envía con cada solicitud a la API, y un token de actualización de larga duración (días), que se utiliza únicamente para emitir nuevos tokens de acceso. Esto limita la exposición si se filtra un token de acceso.
Registrar el plugin JWT
Con Fastify, registre @fastify/jwt y proporcione un secreto seguro. Esto añade utilidades de firma y verificación a la aplicación y a los objetos de solicitud.
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})La ruta de inicio de sesión
POST /auth/login valida las credenciales y después emite ambos tokens. Nunca almacene contraseñas en texto plano; compárelas con un hash (bcrypt/argon2).
app.post('/auth/login', async (req, reply) => {
const { email, password } = req.body
const user = await findUser(email)
if (!user || !(await verifyHash(password, user.hash))) {
return reply.code(401).send({ error: 'Invalid credentials' })
}
// ... sign tokens (next scene)
})Firmar el token de acceso
Firme un token de acceso de corta duración con el id del usuario y las declaraciones mínimas. Mantenga corto el tiempo de expiración (por ejemplo, 15 minutos).
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)Firmar el token de actualización
Firme un token de actualización de larga duración con un marcador distintivo en la carga útil (o con un secreto independiente). Se utiliza exclusivamente en el endpoint de actualización.
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)Token de actualización en una cookie httpOnly
Guarde el token de actualización en una cookie con los atributos httpOnly, SameSite y Secure. JavaScript no puede leerlo (lo que reduce el riesgo de robo mediante XSS), y el navegador lo envía automáticamente al endpoint de actualización.
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})Devolver el token de acceso en el cuerpo
El token de acceso se devuelve en el cuerpo de la respuesta JSON. La aplicación de Vue lo conserva en memoria (no en localStorage) y lo adjunta a las solicitudes a la API. El token de actualización nunca aparece en el cuerpo.
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookiePor qué no almacenar los tokens de acceso en localStorage
Cualquier script puede leer localStorage, por lo que un error de XSS podría robar un token almacenado allí. Mantener el token de acceso en la memoria de JavaScript y el token de actualización en una cookie httpOnly reduce el alcance de un ataque XSS.
La ruta de actualización
POST /auth/refresh lee el token de actualización de la cookie, lo verifica y emite un nuevo token de acceso. Devuelve el nuevo token de acceso en el cuerpo.
app.post('/auth/refresh', async (req, reply) => {
const token = req.cookies.refreshToken
if (!token) return reply.code(401).send()
try {
const payload = app.jwt.verify(token)
const accessToken = app.jwt.sign(
{ sub: payload.sub }, { expiresIn: '15m' }
)
return reply.send({ accessToken })
} catch {
return reply.code(401).send({ error: 'Invalid refresh' })
}
})Proteger las rutas
Añada un preHandler que verifique el token de acceso del encabezado Authorization. @fastify/jwt's request.jwtVerify() lanza una excepción cuando los tokens no son válidos o han expirado, y devuelve un 401.
app.get('/api/me', {
preHandler: async (req, reply) => {
try { await req.jwtVerify() }
catch { reply.code(401).send({ error: 'Unauthorized' }) }
}
}, async (req) => getProfile(req.user.sub))Cerrar sesión: borrar la cookie
Cerrar sesión borra la cookie de actualización para que ya no pueda emitir tokens de acceso. Para obtener garantías más sólidas, también puede registrar o revocar los tokens de actualización en el servidor (mediante una lista de bloqueo o rotación).
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})Comprobación rápida
Compruebe su comprensión de la autenticación JWT.
Resumen
Ha aprendido el inicio de sesión y la actualización mediante JWT:
- Un token de acceso de corta duración y un token de actualización de larga duración
POST /auth/loginvalida las credenciales y firma ambos tokens- El token de actualización se guarda en una cookie httpOnly SameSite Secure
- El token de acceso se devuelve en el cuerpo y permanece en la memoria de JavaScript
POST /auth/refreshemite un nuevo token de acceso a partir de la cookie
Preguntas frecuentes
¿La lección «Autenticación JWT: inicio de sesión y renovación» es gratis?
Sí — el texto completo de «Autenticación JWT: inicio de sesión y renovación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Autenticación JWT: inicio de sesión y renovación»?
Flujo de token de acceso y token de renovación, cookies httpOnly y renovación silenciosa con interceptores Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Autenticación JWT: inicio de sesión y renovación»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Backend Fastify para SPA de Vue
- Autenticación JWT: inicio de sesión y renovación
- Llamadas autenticadas a la API con interceptores de Axios
- Despliegue de Vue full-stack en producción