Acá el repositorio: https://github.com/ianaya89/demo-auth-jwt-vue
Introducción
Desarrollo de Aplicaciones Profesionales con VueJS
VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas
CLI y Dev Tools
Herramientas esenciales para desarrollar con BioJS y NodeJS
Creación de una Aplicación Vue.js con CLI y Webpack Simple
Configuración y uso de Webpack en proyectos JavaScript
Configuración y uso de Babel para compatibilidad JavaScript
Configuración de eSlimt con EstándarJS y Webpack
Integración de SaaS y Bulma en Aplicaciones Vue.js
Configuración de Pag para optimizar el workflow de desarrollo HTML
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: Manipulación Dinámica del DOM
Directivas de Vue: Uso y Funciones Principales
Data Binding y Directivas en Vue: bmodel y bevined
Propiedades Computadas en JavaScript: Creación y Uso Práctico
Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades
Manipulación de Eventos y Métodos en Aplicaciones Web
Creación de Interfaz con Vue.js y Framework CSS Bulma
Manipulación del DOM con Vue.js: Práctica y Ejercicios
REST y HTTP
Integración de Servicios HTTP con JavaScript y API Fetch
Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript
Integración de Servicios en Vue.js: Uso de API y Mejora de Código
Sistema de Componentes
Creación y Registro de Componentes en Vue.js
Creación de Componentes en Vue.js con Bulma para Platzi Music
Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones
Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código
Comunicación entre Componentes en Vue.js: Props y Eventos
Comunicación entre Componentes en Vue: Eventos de Hijo a Padre
Uso de Slots para Inyección Dinámica de HTML en Componentes Vue
Comunicación entre Componentes Vue con Event Bus y Plugins
Vue Router
Vue Router: Creación de Single Page Applications
Instalación y Configuración de Vue Router en Aplicaciones Vue.js
Navegación de Rutas con Vue Router en Aplicaciones SPA
Extendiendo VueJS
Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos
Filtros en Vue: Formateo de Duraciones de Canciones en Componentes
Creación de Directivas Personalizadas en Vue.js
Reutilización de Funcionalidad con Mixins en VueJS
Clases, Animaciones y Transiciones36
Integración de Animaciones CSS3 en Aplicaciones VueJS
Vuex
Gestión de Estados Centralizados con la Librería BuX
Integración de VueX y arquitectura Flux en Vue.js
Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo
Uso de Getters en Vuex para Acceso Personalizado de Estado
Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas
Integración de VueX y Babel en PlatziMusic
Nuxt.js
Renderizado del Lado del Servidor con Vue.js y Nuxt
Creación de Proyectos con Nact.js en Vue para Server-Side Rendering
Integración de VueJS con Nuxt para Server-Side Rendering
Deploy a Producción con Now
Despliegue de Aplicaciones con NOW en BIOS JS
Despliegue de Aplicaciones Node.js con NOW y Webpack
Conclusiones
Construcción de Aplicaciones Profesionales con Vue.js
Bonus
Internacionalización de Aplicaciones con Vue I18n
Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución
Autenticación en Vue.js con JSON Web Tokens (JWT)
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
La autenticación en aplicaciones Vue.js se ha convertido en un tema crucial en el desarrollo web moderno, y uno de los métodos más efectivos y populares es a través del uso de tokens, específicamente JSON Web Tokens (JWT). Estos tokens son esenciales porque permiten una autenticación sin estado, lo que significa que no dependen de una sesión almacenada en el servidor. Esto hace que los tokens sean ideales para arquitecturas RESTful, donde cada solicitud HTTP es independiente y contiene toda la información necesaria para autenticar al usuario.
Un JSON Web Token consta de tres partes codificadas en Base64, separadas por puntos:
Header (Encabezado): Incluye el tipo de token (JWT) y el algoritmo de cifrado utilizado, por ejemplo, HS256.
{
"alg": "HS256",
"typ": "JWT"
}
Payload (Cuerpo): Contiene las declaraciones sobre el usuario y datos adicionales que queramos almacenar.
{
"sub": "1234567890",
"name": "John Doe",
"admin": true
}
Firma: Asegura la integridad del token combinando el encabezado, el cuerpo, y una clave secreta.
La seguridad reside en que solo aquellos con acceso a la clave secreta puedan generar una firma válida, asegurando que los datos no han sido manipulados.
Los JSON Web Tokens son ideales para:
Para integrar JWT en una aplicación Vue.js, seguir estos pasos es clave:
Preparar una API de autenticación: Usar Node.js con Express para manejar la lógica de generación y validación de los tokens.
const jwt = require('jsonwebtoken');
const token = jwt.sign({ id: user.id }, 'secretKey', { expiresIn: '1h' });
Configurar el Vue Router: Usar Vue Router para gestionar rutas y protegerlas según la autenticación.
router.beforeEach((to, from, next) => {
const isLoggedIn = !!localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
next('/login');
} else {
next();
}
});
Utilizar una librería HTTP: Como Axios o fetch con funciones personalizadas para manejar el envío de tokens en headers de las solicitudes.
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
Almacenar y manejar el token localmente: Usar Local Storage para guardar el token y fragmentos de información del usuario, asegurando una experiencia de usuario fluida.
localStorage.setItem('token', response.data.token);
Estos pasos ayudan a manejar la autenticación del lado del cliente de manera eficiente, recordando siempre que la lógica de autenticación vital debe residir en el servidor, manteniendo la seguridad de la aplicación.
Para más detalles sobre la implementación y ejemplos de código, se recomienda consultar los documentos oficiales de JSON Web Token, Vue Router, y librerías HTTP como Axios y Fetch. Llene su mente con estos conocimientos y siga construyendo aplicaciones cada vez más seguras y eficientes.
Aportes 16
Preguntas 7
Acá el repositorio: https://github.com/ianaya89/demo-auth-jwt-vue
No almacenar los token de sesión JWT en el localstorage ya que los datos siempre son accesibles mediante JavaScript. Y tu sitio es vulnerable a ataques XSS. Mas info en: https://auth0.com/docs/security/data-security/token-storage
Me encantó esta clase, sobre todo porque es algo que estoy a punto de implementar, aún así, me gustaría saber cuál sería la forma de hacer esto usando server sider rendering, pues hasta donde se, al menos en el caso de Nuxt.js, para crear una ruta, basta con crear el componente dentro de pages, pero no se cómo podría agregar la lógica de validación de rutas públicas y privadas ahí dentro
Excelente curso Nacho sos un muy buen profe, ademas aprendi muchisimo sobre JS y buenas practicas
Alguien sabe el repo de este ejemplo?
Mil gracias
que Genial esta este live
AYUDA !! Estoy usando el modelo del curso como base para un proyecto laboral, lógicamente también uso TRAE para hacer las llamadas al CORE…tengo una llamda (POST) con la cual hago login en el API REST…esa llamada usa BASIC AUTH…la misma llamada en POSTMAN funciona OK, en cambio en TRAE no…no hay cookies de por medio ni ningún otro header que se agregue…Tienen idea porque falla ??? Yo no se si TRAE me deja hacer un POST con un body vacio…tal vez el error venga por ahí…
Si me pueden ayudar con el link del proyecto de api ??
Esto lo manejé hace unos años con MEAN, pero me interesaría aplicarlo con Laravel y Vue, o hacerlo con PHP vanilla y Vue.
Lo que debió haber sido una clase bonus! Nacho lo escribió en un articulo: https://medium.com/@ianaya89/crea-tu-sitio-web-con-github-pages-y-nuxt-js-6a90fd0a0dc4
Gracias Jenny
Excelente curso, muchas gracias Ignacio por compartirlos. Un Saludo
Gracias Ignacio, muy buen curso
Que cool que el profe explica cualquier termino sin suponer que nosotros lo conocemos ya que lo mas habitual es que las personas crean que con mencionar cosas como node o express las personas ya saben que es, gracias por ser asi ianaya
Muchas gracias, el curso me ayudo mucho, algo que no encontré en el curso es lo siguiente:
La posibilidad de renderizar datos automáticamente que se actualizan en la base de datos mientras estoy desplegando los mismos en una vista.
Muchas gracias por la ayuda!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?