Introducción

1

Desarrollo de Aplicaciones Profesionales con VueJS

2

VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas

CLI y Dev Tools

3

Herramientas esenciales para desarrollar con BioJS y NodeJS

4

Creación de una Aplicación Vue.js con CLI y Webpack Simple

5

Configuración y uso de Webpack en proyectos JavaScript

6

Configuración y uso de Babel para compatibilidad JavaScript

7

Configuración de eSlimt con EstándarJS y Webpack

8

Integración de SaaS y Bulma en Aplicaciones Vue.js

9

Configuración de Pag para optimizar el workflow de desarrollo HTML

10

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

11

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

12

Expresiones en Vue: Manipulación Dinámica del DOM

13

Directivas de Vue: Uso y Funciones Principales

14

Data Binding y Directivas en Vue: bmodel y bevined

15

Propiedades Computadas en JavaScript: Creación y Uso Práctico

16

Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades

17

Manipulación de Eventos y Métodos en Aplicaciones Web

18

Creación de Interfaz con Vue.js y Framework CSS Bulma

19

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

REST y HTTP

20

Integración de Servicios HTTP con JavaScript y API Fetch

21

Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

22

Integración de Servicios en Vue.js: Uso de API y Mejora de Código

Sistema de Componentes

23

Creación y Registro de Componentes en Vue.js

24

Creación de Componentes en Vue.js con Bulma para Platzi Music

25

Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones

26

Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código

27

Comunicación entre Componentes en Vue.js: Props y Eventos

28

Comunicación entre Componentes en Vue: Eventos de Hijo a Padre

29

Uso de Slots para Inyección Dinámica de HTML en Componentes Vue

30

Comunicación entre Componentes Vue con Event Bus y Plugins

Vue Router

31

Vue Router: Creación de Single Page Applications

32

Instalación y Configuración de Vue Router en Aplicaciones Vue.js

33

Navegación de Rutas con Vue Router en Aplicaciones SPA

Extendiendo VueJS

34

Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos

35

Filtros en Vue: Formateo de Duraciones de Canciones en Componentes

36

Creación de Directivas Personalizadas en Vue.js

37

Reutilización de Funcionalidad con Mixins en VueJS

Clases, Animaciones y Transiciones36

38

Integración de Animaciones CSS3 en Aplicaciones VueJS

Vuex

39

Gestión de Estados Centralizados con la Librería BuX

40

Integración de VueX y arquitectura Flux en Vue.js

41

Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo

42

Uso de Getters en Vuex para Acceso Personalizado de Estado

43

Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas

44

Integración de VueX y Babel en PlatziMusic

Nuxt.js

45

Renderizado del Lado del Servidor con Vue.js y Nuxt

46

Creación de Proyectos con Nact.js en Vue para Server-Side Rendering

47

Integración de VueJS con Nuxt para Server-Side Rendering

Deploy a Producción con Now

48

Despliegue de Aplicaciones con NOW en BIOS JS

49

Despliegue de Aplicaciones Node.js con NOW y Webpack

Conclusiones

50

Construcción de Aplicaciones Profesionales con Vue.js

Bonus

51

Internacionalización de Aplicaciones con Vue I18n

52

Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución

53

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

Autenticación en Vue.js con JSON Web Tokens (JWT)

53/53
Recursos

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

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.

¿Cuáles son las ventajas de los JSON Web Tokens?

  1. Desacoplamiento y Autonomía: Los tokens permiten a las aplicaciones funcionar de manera desacoplada, lo que significa que no es necesario ejecutar acciones previas para procesar una solicitud.
  2. Escalabilidad: Al no almacenar sesiones en el servidor, es más sencillo escalar horizontalmente las aplicaciones, sin preocuparnos por compartir información entre instancias de servidor.
  3. Seguridad Autocontenida: JWT es un método de autenticación seguro que almacena información del usuario dentro del mismo token, facilitando así el acceso a datos relevantes sin solicitudes adicionales.
  4. Compatibilidad con JSON: Dado que los JSON Web Tokens están escritos en JSON, es sencillo para cualquier desarrollador JavaScript trabajar con ellos.

¿Cómo se estructura un JSON Web Token?

Un JSON Web Token consta de tres partes codificadas en Base64, separadas por puntos:

  1. Header (Encabezado): Incluye el tipo de token (JWT) y el algoritmo de cifrado utilizado, por ejemplo, HS256.

    {
      "alg": "HS256",
      "typ": "JWT"
    }
    
  2. Payload (Cuerpo): Contiene las declaraciones sobre el usuario y datos adicionales que queramos almacenar.

    {
      "sub": "1234567890",
      "name": "John Doe",
      "admin": true
    }
    
  3. 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.

¿Dónde aplicar JSON Web Tokens?

Los JSON Web Tokens son ideales para:

  1. Aplicaciones de Una Sola Página (Single Page Applications - SPA): Dado que no se depende del servidor para manejar estado o rutas, adaptándose a APIs RESTful.
  2. APIs y Microservicios: La autenticación se maneja desde el servidor, permitiendo una interacción eficiente y segura.
  3. Aplicaciones Móviles y IoT (Internet of Things): Para validar usuarios y permisos sin la necesidad de sesiones de servidor.

¿Cómo integrar JWT con Vue.js y mantener seguridad?

Para integrar JWT en una aplicación Vue.js, seguir estos pasos es clave:

  1. 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' });
    
  2. 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();
      }
    });
    
  3. 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;
    });
    
  4. 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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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!