JWT con Vue Router: autenticación completa

Implementa autenticación sin estado en Vue.js con JSON Web Token (JWT) y mejora la seguridad percibida del usuario. Aquí verás cómo estructurar el token, proteger rutas con Vue Router, automatizar headers con Trae e integrar localStorage para una single-page application eficaz y escalable, tal como explica Ignacio Anaya.

¿Por qué usar tokens JWT en Vue.js?

La autenticación por tokens permite aplicaciones sin estado y desacopladas, ideales para API REST y single-page applications. No dependes de sesiones en el servidor y puedes escalar horizontalmente sin fricción.

• Sin estado: cada request incluye quién es el cliente. No hay sesión en el servidor.
• Desacoplado: obtener y validar el token puede ocurrir en servicios distintos.
• Escalable: sin compartir estado entre instancias; admite load balancer sin complicaciones.
• Casos de uso: single-page application, serverless, APIs, móviles e IoT.
• Nota clave: la autenticación real vive en el servidor. En el cliente, es experiencia de usuario.

¿Cómo funciona la estructura de un JSON Web Token?

Un JWT es autocontenido y está dividido en tres partes codificadas en Base64 y separadas por puntos: header, payload y signature. Permite incluir información del usuario sin consultas adicionales.

• Header: tipo de token (JWT) y algoritmo, p. ej., HS256. Define cómo se firma.
• Payload: datos del usuario y claims estándar como issuer (iss). Puedes incluir rol, mail y otros atributos de negocio.
• Signature: se firma el header y el payload con una frase secreta. Si se altera cualquier dato, la firma no coincide y el token es inválido.
• Seguridad práctica: la firma usa un código único (función de hash). Dos mensajes distintos no deben producir el mismo código, evitando manipulación maliciosa.
• En headers HTTP se envía como Authorization con prefijo Bearer.

Ejemplo de contenido decodificado (representativo):

// Header
{ "alg": "HS256", "typ": "JWT" }

// Payload (ejemplo)
{ "email": "user@mail.com", "role": "root", "iss": "issuer-service" }

¿Cómo integrar JWT con Vue Router, Trae y localStorage?

Para una SPA en Vue, combina Vue Router para el flujo de navegación, Trae para peticiones HTTP y localStorage para persistir el token del lado del cliente. Recuerda: esto no reemplaza la validación del servidor.

¿Cómo guardar token y usuario en localStorage?

Al autenticar, la API retorna el token. Guarda el token completo y decodifica el payload para mostrar datos del usuario cuando sea necesario.

// En el método de login (res es la respuesta de la API)
const token = res.data.token; // "header.payload.signature"
localStorage.setItem('token', token);

// Obtener la parte del medio (payload) y decodificar Base64
const payloadBase64 = token.split('.')[1];
const user = JSON.parse(atob(payloadBase64));

// Persistir datos útiles del usuario
localStorage.setItem('user', JSON.stringify(user));

Puntos clave:

• Guarda el token completo para autenticar requests.
• Decodifica solo el payload para leer rol, email u otros atributos.
• Evita incluir contraseñas en el payload.

¿Cómo inyectar el token en cada request con Trae?

Usa un hook de Trae para agregar el header Authorization automáticamente en cada request autenticado.

import trae from 'trae';

const api = trae.create({ baseUrl: 'https://tu-api' });

api.before((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers = config.headers || {};
    config.headers.Authorization = `Bearer ${token}`; // estándar
  }
  return config;
});

export default api;

Beneficios:

• Menos código repetido en cada llamada.
• Consistencia al usar Authorization: Bearer <token>.

¿Cómo proteger rutas con Vue Router?

Define rutas públicas con meta y usa un guard para redirigir según autenticación. Recuerda: en el cliente es control de interfaz; el servidor sigue validando el token.

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import Login from './components/Login.vue';
import Profile from './components/Profile.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/profile', name: 'profile', component: Profile },
    { path: '/login', name: 'login', component: Login, meta: { is_public: true } },
  ],
});

function isAuthenticated() {
  return !!localStorage.getItem('token');
}

router.beforeEach((to, from, next) => {
  const isPublic = to.meta && to.meta.is_public === true;

  if (!isPublic && !isAuthenticated()) {
    return next({ name: 'login' }); // no autenticado: ir a login
  }

  if (to.name === 'login' && isAuthenticated()) {
    return next({ name: 'home' }); // autenticado: no volver a login
  }

  next();
});

export default router;

Extras útiles según el flujo descrito:

• Usa un endpoint de verificación para validar el token en el servidor.
• Incluye en el payload rol y permisos para habilitar/ocultar contenido por perfil.
• En el servidor, implementa middleware como express-jwt y librerías como json_web_token en Node y Express para emitir y validar.

¿Te gustaría compartir cómo gestionas roles, permisos y redirecciones con JWT en Vue? Deja tu comentario y cuéntanos tu enfoque.