JWT con Vue Router: autenticación completa

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0039:36

JWT con Vue Router: autenticación completa

Curso Profesional de Vue.js 2

Clase 53 de 53

Clase 53 / 53

Recursos

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.

Marcos Rodriguez

Hace 7 años

Muchas gracias por el curso, esta muy bueno... pero tengo varias cosas sin entender; teniendo en cuenta que estamos implementando **vue **con vue-router primero importamos Vue y luego lo volvemos a importar en el router, como que hay codigo repetitivo, ejemplo:

main.js

import Vue from 'vue'
import App from './App'
import router from './router/index'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

y luego hacemos esto en el router.js

import Vue from 'vue'
import Router from 'vue-router'

...
Vue.use(Router)

y ya he visto en varios proyectos profesionales de gran embergadura que se hace eso? No se supone que debemos optimizar codigo

Manuel Ojeda

Hace 7 años

En realidad el código debería ir así:

main.js

import Vue from 'vue'
import Router from 'vue-router'
import App from './App'
import router from './router/index'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

Y en router.js solo tendriamos un arreglo de rutas:

router.js

import TuComponente from '../components/TuComponente.vue'

const routes = [
    { path: '/', component: TuComponente , name: 'home' },
]
export default routes

Comentarios (27)27 comentarios

Agustin Clemente

Hace 8 años

Erick Perez

Jenny Katherine Aguilera Morales

Ivan Toro

José Diaz

Hace 6 años

Luis Rogelio Reyes Hernandez

juan jesus Castillo Monjaraz

Daniel Villanueva

Hace 5 años

Usuario anónimo

User

Hace 9 años

Nacho Anaya

Profesor

Raul Novelo

Cristian Giagante

Carlos Eduardo Gomez García

Sebastián Buitrago

Ezequiel Mella

Mauricio Duque

Gabriel De Andrade

TICS IADEP

Andres Peña

Inveb Chile SPA

Hace 4 años

Alex Garcia Miranda

Edward Steven Ramos Palacios

Simon Clemente

Edgar Ivan Vazquez Camargo

Alan Lapierre

Carlos Enrique Gonzalez Peña

Diego Tinitana

Alejandro González Reyes

Jaime Rafael Norato Corredor

Ronald Alexander Palacios Garrido

David Alejandro Abreu Abreu

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa

JWT con Vue Router: autenticación completa