un curso de cero lo veo absurdo desde mi punto de vista, hay miles de canales que ensenan lo basico, pero canales de medio alto nivel hay pocos, por mi sigue en la misma linea ensenanado ese 5% de contenido que te haga diferenciarte del resto
Si, los jwt viene cifrados desde tu backend, y tu backend ya debe tener todas las configuraciones de seguridad para que dea permiso de "quienes pueden usar ese token"
Hola amigo exelente tema el que tocaste en este video Bro por alguna razon analizando la explicacion que diste con los graficos me doy cuenta que de la manera que se implemento el ErrorInterceptor en el momento en que falle el refreshToken request va a entrar en un bucle pues cuando se llama al refreshtoken (imaginando que ya este tambien aya vencido ) como es una nueva peticion se ejecuta el primer interveptor el cual solo le asigna el header y como se vencio el refreshtoquen el Error interceptor cachea ese error pero no en el cathc del refreshToken si no en el cath de nivel superior lo que hace un bucle infinito cuando el refresh token expira en mi caso haciendo el ejercicio usted modifique el codigo del errorIntyerceptor a : export function errorApiInterceptor( req: HttpRequest, next: HttpHandlerFn ): Observable { const authService = inject(AuthService); const router = inject(Router); console.log('************ErrorInterceptor*****************'); return next(req).pipe( catchError((e: HttpErrorResponse) => { if (e.status === HttpStatusCode.Unauthorized) { if (req.url == API_URLs.REFRESH_TOKEN) { console.log('redirect to sign-In'); authService.isRefreshing = false; router.navigate(['auth/login-form']); return EMPTY; } authService.isRefreshing = true; return authService.refreshToken().pipe( finalize(() => (authService.isRefreshing = false)), switchMap((response: any) => { const newSession: ISession = { accessToken: response.accessToken.token, refreshToken: response.refreshToken.token, }; authService.updateToken(newSession); console.log('***********Updating Token*******'); const reqClone = authService.addTokenHeader(req); return next(reqClone); }), //********A este Catch no entra nunca**********// catchError((e: HttpErrorResponse) => { console.log('redirect to sign-In'); authService.isRefreshing = false; router.navigate(['auth/login-form']); return EMPTY; }) ); } return throwError(() => e); }) ); }
Yo lo que hago es utilizar la librería Crypto-js y genero tokens aleatorios del cual los hago cambiar al cerrar la sesión, hago comparaciones para cuando se intente agregar una credencial ya usada esta quede invalidada, aquí un ejemplo mío de registro, login y tokens: ruclips.net/video/wg6kT6z4vWM/видео.html
Gracias Jimmy como se ha comentado este tutoría está excelente explicando el caso de uso y su implementación, sin embargo, algún día, puedas completarlo, de forma que las peticiones subsecuentes no se cancelen, sino queden encoladas esperando el nuevo access token y continuar su flujo, tengo el caso de uso donde una página carga varios combos(selects) por medio de peticiones http y cuando toca que se da el refreshToken solo se carga uno o dos dependiendo el tiempo, el resto se quedan vacíos.
Una consulta, cómo puedo definir una ruta y donde crecer profesionalmente? . En un principio solo trabaja con Angular, pero al no encontrar trabajo solo de frontend tuve que migrar a ser full stack . Actualmente, estoy en una empresa con c# creando apis, pero me quieren pasar a hacer apps de escritorio con visual basic. Veo que JS esta demasiado saturado por los bootcamps, en cambio con c# y java a pesar de ser alguien junior te dan un sueldo bastante bien (Mínimo 4k soles ).
En Perú lamentablemente los desarrolladores no son bien pagados; no conosco alguna entidad que te enseñe Angular avanzado, por lo general encuentras lo basico😞 debes mejorar por tu cuenta, aprende estrategias de modularización, patrones de diseño, patrones de arquitectura, testing, scss y html avanzado, Typescript avanzado, optimización de imagenes y estrategias Lazy, espero esto te ayude; espero sacar una serie de video enseñado angular avanzado desde cero, gracias.
@@LogiDev Gracias por tu respuesta. Sí de hecho aprendo varias cosas por mi cuenta. A comparación con otras carreras universitarias, la de nosotros veo que es más informal, por tema de sueldo y beneficios corporativos, al menos en el caso de tr y jr - Me gustaría que hagas un video futuro sobre componentes genéricos, creo que sería un gran video Saludos, espero te encuentres bien !
@LogiDev gracias como siempre gracias por tus videos, hablando de angular avanzado tienes videos o haz trabajado con formularios Dinámicos donde todos los controles se pinten dinámicamente en el Html y seteandolos con sus respectivas propiedades ejemplo si el tipo es String, Datetime, Number etc.. y que esta configuración venga de alguna base de datos ?
Hola, afortunadamente Angular tiene directivas y te evitas estar generando HTMLElements y usar "attach", algo que si harias con solo javascript; lo que haria es en base a esa configuracion que viene de tu base de datos (Array), crear el FormGroup y sus respectivos controles y validadores, luego en el html con un ngFor recorro la configuracion que viene y voy creando los elementos html con ayuda de un ngIf o un ngSwitch y sus respectivas propiedades; es un buen tema para sacar en un video, lo tendre encuenta, gracias.
Excelente contenido, los interceptores conptualmente funcionan como los midleware en el mundo de node, basicamente es una capa por donde pasan las peticiones, en la firma tienen el objeto next para pasar la request a la siguiente capa o al siguiente midllware, son usados para autenticar, loguear, o hacer cualquier logica que se nos imagine
La siguiente versión de de Angular va cambiar totalmente la manera como se usa el framework. Inclusive recomiendan empezar los proyectos con la nueva forma o como dices la nueva experiencia del programador. Para un junior que recién está empezando. Recomiendas esperar para aprender desde esta nueva perspectiva de desarrollo en Angular , o recomiendas aprender la manera tradicional.
buen contenido aunque cuando hay mucha logica o logica que pueda dar pie a confusion, lo ideal o lo que yo hago es crear en la parte superior del script un pequeno guion o comentario del flujo, podrias utilizar un spinner mientras todas esas transacciones asincronas esten sucediendo
Excelentísimo contenido estimado Jimy. Te comento que seguí tus pasos realizando un proyecto nuevo, todo funcionaba igual hasta que llegué al punto en el que el refreshToken, cuando expira y realizas una solicitud, lo normal sería que redireccione al login, pero eso no estaba ocurriendo, se quedaba en un bucle infinito haciendo petición tras petición, una vez cancelada el backend recién redireccionaba al login. Descargué tu proyecto y lo ejecuté (sin el delay(5000)) y efectivamente estaba ocurriendo lo mismo, se queda en ese bucle. Así que para solucionarlo tuve que agregar un contador para determinar el número de veces del Unauthorized y luego lanzar un throwError(() => error). Solo quería comentarte lo que ocurre también en tu repo y cómo lo solucioné. Por lo demás, son excelentes tus contenidos, siempre me doy un tiempo para verlos. ¡Saludos!
Gracias Martín!! Me estaba pasando lo mismo, cuando expiraba el refreshToken me quedaba en un bucle enviando peticiones al endpoint de refresh, me estaba volviendo loco, jajaja, pensé que estaba haciendo algo mal o me estaba faltando algo. Implementé el contador de intentos y el throwError y ahora funciona perfecto! El video es genial Jimy, súper claro y con muchísima data!
un curso de cero lo veo absurdo desde mi punto de vista, hay miles de canales que ensenan lo basico, pero canales de medio alto nivel hay pocos, por mi sigue en la misma linea ensenanado ese 5% de contenido que te haga diferenciarte del resto
Gracias bro, pienso lo mismo, si hago un curso de angular moderno podria ser de nivel semi senior hasta architect, gracias por el comentario 🙌
es totalmente seguro guardar tu acces token en el localStorage?
Si, los jwt viene cifrados desde tu backend, y tu backend ya debe tener todas las configuraciones de seguridad para que dea permiso de "quienes pueden usar ese token"
Hola amigo exelente tema el que tocaste en este video Bro por alguna razon analizando la explicacion que diste con los graficos me doy cuenta que de la manera que se implemento el ErrorInterceptor en el momento en que falle el refreshToken request va a entrar en un bucle pues cuando se llama al refreshtoken (imaginando que ya este tambien aya vencido ) como es una nueva peticion se ejecuta el primer interveptor el cual solo le asigna el header y como se vencio el refreshtoquen el Error interceptor cachea ese error pero no en el cathc del refreshToken si no en el cath de nivel superior lo que hace un bucle infinito cuando el refresh token expira en mi caso haciendo el ejercicio usted modifique el codigo del errorIntyerceptor a :
export function errorApiInterceptor(
req: HttpRequest,
next: HttpHandlerFn
): Observable {
const authService = inject(AuthService);
const router = inject(Router);
console.log('************ErrorInterceptor*****************');
return next(req).pipe(
catchError((e: HttpErrorResponse) => {
if (e.status === HttpStatusCode.Unauthorized) {
if (req.url == API_URLs.REFRESH_TOKEN) {
console.log('redirect to sign-In');
authService.isRefreshing = false;
router.navigate(['auth/login-form']);
return EMPTY;
}
authService.isRefreshing = true;
return authService.refreshToken().pipe(
finalize(() => (authService.isRefreshing = false)),
switchMap((response: any) => {
const newSession: ISession = {
accessToken: response.accessToken.token,
refreshToken: response.refreshToken.token,
};
authService.updateToken(newSession);
console.log('***********Updating Token*******');
const reqClone = authService.addTokenHeader(req);
return next(reqClone);
}),
//********A este Catch no entra nunca**********//
catchError((e: HttpErrorResponse) => {
console.log('redirect to sign-In');
authService.isRefreshing = false;
router.navigate(['auth/login-form']);
return EMPTY;
})
);
}
return throwError(() => e);
})
);
}
Excelente aporte, podrías hacer un pull request al repositorio y agregamos tus cambios
Había revisado aproximadamente 5 videos sobre como manejar el refresh token y ninguno funcionó excepto este, gracias ahora soy tu fan.
Gracias por tu apoyo, que bueno que el video te ayudó 🙌🏻
Gracias bro, espero el curso ansioso del proyecto desde 0 y luego con conceptos avanzados con hexagonal arch al final
Gracias por tu apoyo 🙌🏻
Yo lo que hago es utilizar la librería Crypto-js y genero tokens aleatorios del cual los hago cambiar al cerrar la sesión, hago comparaciones para cuando se intente agregar una credencial ya usada esta quede invalidada, aquí un ejemplo mío de registro, login y tokens: ruclips.net/video/wg6kT6z4vWM/видео.html
Excelente alternativa
Gracias Jimmy como se ha comentado este tutoría está excelente explicando el caso de uso y su implementación, sin embargo, algún día, puedas completarlo, de forma que las peticiones subsecuentes no se cancelen, sino queden encoladas esperando el nuevo access token y continuar su flujo, tengo el caso de uso donde una página carga varios combos(selects) por medio de peticiones http y cuando toca que se da el refreshToken solo se carga uno o dos dependiendo el tiempo, el resto se quedan vacíos.
Una consulta, cómo puedo definir una ruta y donde crecer profesionalmente? . En un principio solo trabaja con Angular, pero al no encontrar trabajo solo de frontend tuve que migrar a ser full stack . Actualmente, estoy en una empresa con c# creando apis, pero me quieren pasar a hacer apps de escritorio con visual basic. Veo que JS esta demasiado saturado por los bootcamps, en cambio con c# y java a pesar de ser alguien junior te dan un sueldo bastante bien (Mínimo 4k soles ).
En Perú lamentablemente los desarrolladores no son bien pagados; no conosco alguna entidad que te enseñe Angular avanzado, por lo general encuentras lo basico😞 debes mejorar por tu cuenta, aprende estrategias de modularización, patrones de diseño, patrones de arquitectura, testing, scss y html avanzado, Typescript avanzado, optimización de imagenes y estrategias Lazy, espero esto te ayude; espero sacar una serie de video enseñado angular avanzado desde cero, gracias.
@@LogiDev Gracias por tu respuesta. Sí de hecho aprendo varias cosas por mi cuenta.
A comparación con otras carreras universitarias, la de nosotros veo que es más informal, por tema de sueldo y beneficios corporativos, al menos en el caso de tr y jr
- Me gustaría que hagas un video futuro sobre componentes genéricos, creo que sería un gran video
Saludos, espero te encuentres bien !
@LogiDev gracias como siempre gracias por tus videos, hablando de angular avanzado tienes videos o haz trabajado con formularios Dinámicos donde todos los controles se pinten dinámicamente en el Html y seteandolos con sus respectivas propiedades ejemplo si el tipo es String, Datetime, Number etc.. y que esta configuración venga de alguna base de datos ?
Hola, afortunadamente Angular tiene directivas y te evitas estar generando HTMLElements y usar "attach", algo que si harias con solo javascript; lo que haria es en base a esa configuracion que viene de tu base de datos (Array), crear el FormGroup y sus respectivos controles y validadores, luego en el html con un ngFor recorro la configuracion que viene y voy creando los elementos html con ayuda de un ngIf o un ngSwitch y sus respectivas propiedades; es un buen tema para sacar en un video, lo tendre encuenta, gracias.
@@LogiDev Gracias seria interesante sacaras un video con esto, no se ve mucho en Youtobe y poco lo enseñan.
@CmonroyP Gracias por la recomendación y el apoyo al canal 🙌
Buen contenido, me gustaría ver un video para ver cómo sería la autenticación con JWT vs JWS para entender como funcionan, gracias
Gracias por la recomendación ✌🏻
Excelente contenido, los interceptores conptualmente funcionan como los midleware en el mundo de node, basicamente es una capa por donde pasan las peticiones, en la firma tienen el objeto next para pasar la request a la siguiente capa o al siguiente midllware, son usados para autenticar, loguear, o hacer cualquier logica que se nos imagine
Magistral explicacon teorica y practica. Eres un crack. Saludos desde Colombia.
Hola David, gracias por tu apoyo 🤗
La siguiente versión de de Angular va cambiar totalmente la manera como se usa el framework. Inclusive recomiendan empezar los proyectos con la nueva forma o como dices la nueva experiencia del programador. Para un junior que recién está empezando. Recomiendas esperar para aprender desde esta nueva perspectiva de desarrollo en Angular , o recomiendas aprender la manera tradicional.
Recomiendo aprender ambas, ya que las empresas no migrarán sus proyecto a angular 16+ de inmediato, saludos y gracias por apoyar el canal🙌🏻
COmo siempre dando lo mejor a la comunidad gracias hermanito
Gracias por todo tu apoyo bro 🤗
Excelente clase máster.. si seria bueno el curso de cero con todo lo nuevo 💪🏻💪🏻gracias
Gracias por tu apoyo🙌🏻
Muchas gracias, Jimy. Explicación muy completa, genial, como siempre.
Gracias por el apoyo 🙌🏻
Grande logi...
Gracias bro 🙌🏻
buen contenido aunque cuando hay mucha logica o logica que pueda dar pie a confusion, lo ideal o lo que yo hago es crear en la parte superior del script un pequeno guion o comentario del flujo, podrias utilizar un spinner mientras todas esas transacciones asincronas esten sucediendo
Gracias por la observación, espero mejorar ☺️🙌🏻
@@LogiDev Gracias poir tu trabajo Jimmy, haces un gran bien a la comunidad
Excelentísimo contenido estimado Jimy. Te comento que seguí tus pasos realizando un proyecto nuevo, todo funcionaba igual hasta que llegué al punto en el que el refreshToken, cuando expira y realizas una solicitud, lo normal sería que redireccione al login, pero eso no estaba ocurriendo, se quedaba en un bucle infinito haciendo petición tras petición, una vez cancelada el backend recién redireccionaba al login. Descargué tu proyecto y lo ejecuté (sin el delay(5000)) y efectivamente estaba ocurriendo lo mismo, se queda en ese bucle. Así que para solucionarlo tuve que agregar un contador para determinar el número de veces del Unauthorized y luego lanzar un throwError(() => error). Solo quería comentarte lo que ocurre también en tu repo y cómo lo solucioné. Por lo demás, son excelentes tus contenidos, siempre me doy un tiempo para verlos. ¡Saludos!
Gracias Martín!! Me estaba pasando lo mismo, cuando expiraba el refreshToken me quedaba en un bucle enviando peticiones al endpoint de refresh, me estaba volviendo loco, jajaja, pensé que estaba haciendo algo mal o me estaba faltando algo. Implementé el contador de intentos y el throwError y ahora funciona perfecto!
El video es genial Jimy, súper claro y con muchísima data!
muy buen contenido!
Gracias por tu apoyo