Refresh Tokens en Angular 18 usando interceptors

[@RubianoAndy]

Muchas gracias amigo por este aporte, pdt, para evitar los intentos repetitivos a la hora de realizar el refresh token, deben colocar esto al principio del interceptor // Deja pasar la petición sin interceptarla, para evitar un bucle infinito if (req.url.includes('/refresh-token')) return next(req); Con esto evitan que la petición del refresh-token sea interceptada mientras están interceptando la petición actual, lloré sangre descubriendo ese bug 😢😢😢😢

[@HiroshyRojasSalcedo]

muchas gracias! me quedo muy claro con tu ejemplo! 🤩🤩🤩🤩

[@jorgelachapelle]

Excelente explicación

[@88goeth]

Mario Girón no lo conocía y es quizás el mejor descubrimiento este año para mí, que gran forma de enseñar. Es incluso mejor que Fernando Herrera, espero tenga más presencia en KZbin, lo he buscado y tiene un canal abandonado. Una pena porque es excelente.

[@mariogiron]

Muchas gracias. Échale un vistazo a este canal porque llevamos subiendo contenido desde hace años 😁

[@jeremy.es17]

@@mariogiron Mario excelente contenido, una consulta el código del backend no esta subido a un repo en github?

[@alexechavarria3283]

Increible lo bien y claro que explicas! Contenido 100% de calidad y que puede comprender todo el mundo. 👏🏼👏🏼👏🏼

[@Garajedeideas]

Gracias por tu comentario! Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda :)

[@leytonmanueldiaz2830]

Más suscriptores para este señor por favor

[@Garajedeideas]

Gracias por tu comentario! Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda :)

[@leytonmanueldiaz2830]

@@Garajedeideas Son de lo mejor, saludos desde Colombia !!!

[@andrespodadera5874]

Muchas gracias hombre, tenía como referencia una versión es más antigua y no me reconocía el uso del interceptor. Añadiéndolo al app.config funciona perfectamente

[@maurovgarcia]

Me ha salvado máster.

[@lucasruiz6176]

Impecable !! Muchas gracias por tus videos !

[@mariogiron]

Gracias 😁

[@davidwebchile]

Gracias Mario! Muy clara la implementación.

[@mariogiron]

Gracias a ti 😊

[@ae.h.h]

¿Qué estrategia recomendarias para evitar que varios flujos de request crusen al mismo tiempo por un interceptor?. Mil gracias por este gran aporte.

[@shokoshokao8947]

Buenas! Creo que hay que hacer al menos una verificación del error.status obligatoriamente. Porque si pierdes tanto el token como el token de refresco, al llamar a refreshToken(), como es en si misma otra petición, va a volver a entrar al interceptor y te va a dar un error, por lo que va a volver a llamar a refreshToken() y a entrar en un bucle infinito. Yo lo solucioné, y porque el backend así me lo permitía, cortando el interceptor antes del refreshToken() si el error no es 403. No sé si es el mejor enfoque, pero me sirvió. Gracias por el video!

[@RrenzOS]

Tengo una pregunta , si quiero aprender angular de cara a conseguir mi primer empleo como junior frontend developer , que versión de Angular debería aprender al día de hoy ? Versión antes de la 17 y progresivamente la 18 y 19 ? o de la versión 17+ ? Y los proyectos que haría con angular para mi portafolio con que versión serían ?

[@jesuschunga1009]

Excelente contenido 😎

[@TravisDDr]

Podrías hacer un ejemplo con angular fire?

[@JavierAcrich]

verificando los claims del token en el interceptor, podrias saber si un token esta caducado antes de enviarlo al backend. De esa manera podrias ahorrarte un request.

[@GuppySn-acuario]

Puedes hacer un video, de como crear un appsetting.json tipo enviroment para que pueda usar un unico build para varias implementaciones?

[@cramirez8562]

A voz de pronto, solo chekeando el repo, el refesh token se solicita cada vez que hay un error http.... No serìa interesante verificar si es 401 - unauthorized? O si el token ha expirado o no....? Gracias

[@blackdeath166]

yo estoy utilizando en mi back nestjs y graphql y en el front angular con apollo-angular, aqui se crea un modulo para la configuracion de apollo se puede utilizar los interceptos, porque yo en la misma configuracion, puedo estar mandando los tokens. O cual seria la forma mas adecuada?

[@mariogiron]

Supongo que el interceptor captura de igual manera la petición que sale hacia tu server y que el cliente de Apollo se centrará más en cómo se envía y el formato y cómo recuperas la respuesta

[@Shinigami4rt]

Hola, tienes uno igual con Vue 3 ? 🧐👀

[@Garajedeideas]

Hola! Lo que tenemos de Vue, lo tienes en esta playlist que hicimos: kzbin.info/www/bejne/gnulf6Cbd5eVjZY , por si puedes localizar algo que te pueda ayudar. Sino, gracias por tu feedback y lo tendremos en cuenta para ver si podemos cuadrarlo más adelante 😉

[@dieguillo6661]

solo se necesita el refreshtoken? yo le paso el token y el refreshtoken que va a expirar para obtener nuevo token y refreshtoken, asi lo tengo en mi backend es bueno de esa manera? o no es necesario pasar el token que va a caducar?

[@oscarhernandez-ig8dj]

por lo general solo se utiliza el refresh token

[@martinflores9611]

y generalmente que se pone en el token ?? solo el id del usuario o puede ser toda la info ejemplo nombre, edad, sexo etc

[@gamuro6977]

creo que solo el id y cifrado

[@oscarhernandez-ig8dj]

@@gamuro6977 el rol del usuario para controlar las rutas en angular

[@RubianoAndy]

Entre menos información le coloques a los tokens, mucho mejor, yo en lo personal coloco el userId y ya con consultas utilizando el interceptor, me traigo la información que necesito

[@martinflores9611]

@@RubianoAndy ok entonces el interceptor hace la peticion para traerte los datos ya del usuario y guarlos por ejemplo en local storage ??

[@daniel-peiro]

Qué edad tienes amigo mío? A mi que me cuesta tener claro un sólo lenguaje (C#) y algo de typescript, flipo que seas tan bueno con tantos lenguajes y tantos frameworks Das rabia (de buen rollo jejeje)

[@MijaelParionaTarqui]

bucle infinito