#14 Programando un sistema de ventas real | Interceptors y localStorage en Angular

[@hdeleonnet]

Si te ha gustado el video me puedes dejar un pulgar arriba, y si quieres apoyarme un poco más, puedes hacerlo compartiéndolo en tus redes sociales, ¡Muchas gracias!

[@renatoyufratozo2984]

compartido bro!, ya a la espera del siguiente xD!, habrá algo de reactive forms :D? y streams ?

[@hdeleonnet]

Sigue reactive forms

[@nocturno1109]

Un detalle muy importante Héctor. En el Startup.cs es importantísimo colocar app.UseAuthentication() antes que app.UseAuthorization() xq si no no va a poder acceder al controlador aunque le llegue el token válido.

[@draagon123]

Muchas gracias por subir la continuación del curso, saludos.

[@hdeleonnet]

ya ahora si a darle

[@ualvarez95]

Tan clara la explicación como siempre!. Como humilde aporte en mi caso usé Enum con TypeScript para la propiedad Exito del objeto Response para que quede algo así: if (res.status == StatusResponse.Success) Enum en TypeScript: export enum StatusResponse{ Error = 0, Success = 1 } La interface Response me quedó así: import { StatusResponse } from './status'; export interface Response{ status: StatusResponse; message: string; data: any; } No hay que olvidar de también declarar el Enum en la API Core para que no falle. Saludos!

[@ebernatanael5219]

con un Enum queda más elegante que un entero.

[@marcelojuancabreragutierre2460]

Que bien explicas todo, aprendo un montón con tus vídeos, muchas gracias.

[@marvinomarhernandez7647]

Eres un maestro nato Hector, muy agradecido por compartir tus conocimientos

[@bacuma1962]

Que interesante este mundo del desarrollo de software. Felicidades por tu curso. Ay seguimos en contacto. Saludos, gracias.

[@hugoniquendiaz6185]

Esta semana estaba siguiendo todo el curso, se agradece todo el conocimiento compartidos, go go a seguir practicando 👍💻

[@tomasizquierdomartinez1517]

Excelente trabajo gracias, espero que te encuentres mejor al igual que la familia

[@hdeleonnet]

Muchas gracias

[@RobertoJimenezH88]

chingón! muy claras tus explicaciones, excelente video!. saludos desde Hermosillo, Sonora.

[@waltertorres5699]

Excelente vídeo me sirvió de mucho para aclarar algunas inquietudes. Felicitaciones y muchas gracias.

[@smith123456789ist]

Este curso esta super hiper mega electrónicamente bien bacano y bueno jajaja

[@facundovega1726]

El mejor lejos! Gracias Hector de Leon por tu gran aporte, sos un genio de verdad!

[@enriquerivera814]

Muchas gracias hector, excelente aporté, estoy pendiente los siguientes vídeos

[@diegobarrera5699]

Muchas gracias por compartir su conocimiento

[@edwinoswaldorodriguezleton5437]

He resuelto tantas dudas. Gracias.

[@josealfonsocastrocantillo5918]

exelente serie de videos

[@xalitoarriaza844]

Wow! Excelente video.

[@ddcooper19]

Gracias HdeLeon. 💪👍

[@jonathancudrisperalta1220]

gracias por brindar tus conocimientos, tengo el siguiente error, No se puede asignar un argumento de tipo "null" al parámetro de tipo "Usuario" esto ocurre en el método logout. Además dentro del constructor en la parte del this.usuarioSubject = new BehaviorSubject(JSON.parse(localStorage.getItem('usuario'))); me dice No se puede asignar un argumento de tipo "string | null" al parámetro de tipo "string" si alguno podría ayudarme se lo agradecería.

[@JELV992]

A mi tambien me pasa lo mismo jeje y no se que se me paso ayuda!!

[@josezambranovelasquez8700]

yo lo resolví colocando lo siguiente: this.usuarioSubject =new BehaviorSubject(JSON.parse(localStorage.getItem("usuario")!)) ;

[@JELV992]

@@josezambranovelasquez8700 llegamos a la misma solución jeje llevo 2 días buscando lo del logout gracias

[@josezambranovelasquez8700]

@@JELV992 para resolver lo del logout hay q colocar lo siguiente : this.usuarioSubject.next( null!); y listo y modificar también this.usuarioSubject =new BehaviorSubject(JSON.parse(localStorage.getItem("usuario")!)) ; porque da error mas adelante al desloguear

[@JELV992]

@@josezambranovelasquez8700 gracias!! también lo resolví colocando en la tsconfig.json de angular la instrucción "strictNullChecks": true, nose como afecte el proyecto pero me compilo bien

[@TonicoBonico]

Tome su like, señor.

[@cesaraugusto66]

Te daré tu like antes de ver el video, porque si que sera bueno. :D

[@kevinalexismartinezherrera7004]

Excelente curso!! Tengo unos errores con mi código, ya que me marca error a la hora de vaciar usuarioSubject y al asignarle el valor en el constructor despues de haberlo obtenido del localStorage.

[@tarralover7636]

GRACIAAAS

[@robertomorocho6057]

hdeleon.net debe ser declarada una religión xD ... Gracias hmno Saludos

[@renatoyufratozo2984]

que crack!

[@loloserbmonysodillepa5520]

gracias hector, ya me estaba faltando el aire jjj

[@javiermanzanillo]

quisiera saber si vas filtro de busqueda ? por que me gustaria saber como crearlo

[@maheza36]

Hector muchas gracias por tu contenido, excelente vídeo; pero quisiera consultarte algo; supongamos un escenario donde yo tengo un metodo en mi Api que me indique si el usuario esta logueado o no (por seguridad el usuario no puede tener más de una sesión activa en el mismo dispositivo, entonces yo guardo un token generado por la api y la envio en los claims); quisiera saber como desde el canActivate podría consumir ese endpoint de la api; tengo entendido que en ese caso el canActivate retorna un observable algo así canActivate() : Observable { ... } pero no logro hacer que retorne el true o false según el response de la api. GRACIAS crack!!!

[@danielmeza7156]

uso de behaviorSubject 03:16

[@angelsepulveda1907]

Existe algun repositorio para este sistema de ventas?

[@Acal1415]

tengo 2 preguntas, 1- como se maneja el tema cuando el token ha expirado? 2- si quiero validar si despues de x tiempo de inactividad en la pagina, haga un logout, sin tener que hacerlo en cada pagina, de que manera se podria implementar. muchas gracias

[@onsiteImagitech]

Hola Héctor muy buenos tus videos y bien claros en la explicación, gracias y felicitaciones por eso. Estoy siguiendo esta serie y me he quedado pegado en apiauth.service.ts en la línea del método logout : this.usuarioSubject.next(null) me lanza este error: "No se puede asignar un argumento de tipo "null" al parámetro de tipo "Usuario".ts". Lo he revisado y está escrito igual que lo haces tu. Uso Angular 11.2.2 /typescript 4.1.5 .Si pudieras ayudarme con ese error te agradecería mucho.

[@daymysmunoz1026]

Hola , tengo el mismo problema. Conseguiste resolverlo? Gracias

[@onsiteImagitech]

@@daymysmunoz1026 Si lo mio fue que estaba mal escrito un tag en el html

[@daymysmunoz1026]

@@onsiteImagitech ok. Gracias. Voy a verificar. Saludos.

[@onsiteImagitech]

@@daymysmunoz1026 Hola no recuerdo bien en detalle como lo solucioné pero debes fijarte bien en la interface Usuario .ts en los nombres de argumentos: email y token

[@daymysmunoz1026]

@@onsiteImagitech perfect. Gracias. Un saludo

[@smith123456789ist]

hdeleon tiene video sobre pruebas unitaria en angular o .net ?

[@hdeleonnet]

Aun no pero en breve

[@smith123456789ist]

@@hdeleonnet deberias agregarlo al este curso para que este full y para verlo en proyecto reales

[@DonPolar]

Es excelente curso, lo estoy siguiendo paso a paso y me funciona todo perfecto, muchas gracias. Pero llegue hasta un error en el archivo app.module.ts: "Cannot find name 'JwtInterceptor'.ts(2304)" "{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }" he buscado y no logro resolver porque me da error (minuto 28:16) ayuda por favor

[@Daniel38912]

Tienes que importar en tu app.module.ts el archivo de donde esta la clase JwtInterceptor, en mi caso es asi import { JwtInterceptor } from './security/jwt.interceptor'

[@hoeangeru2]

Antes que nada GRACIAS HECTOR!. Tengo la situación que no me mandar el BearerToken(Security/JwtInterceptor) en el cuerpo aunque si me retorna el token al hacer el login, pero no logro mandarselo al controlador que tiene el [Authorize] en C#, que podría ser?. Gracias de antemano.

[@RobertoBorbolla0509]

Lo pudiste resolver?

[@hoeangeru2]

@@RobertoBorbolla0509 Nop. Tu si?

[@RobertoBorbolla0509]

@@hoeangeru2 pensaba que era algo más, pero simplemente había escrito mal Authentication en el header del JwtInterceptor 😅...lo escribí correctamente y jaló.

[@hoeangeru2]

@@RobertoBorbolla0509 que me alegro, yo no le he podido dar continuidad al que llevo pero lo tengo en el git, puedo agregarte de contacto para ver tu versión y comparar en que me equivoqué?

[@RobertoBorbolla0509]

@@hoeangeru2 ya está actualizado el repo

[@carlosvquiroz8484]

ami no me guarda el bearer solo me regresa el nombre token y el token

[@hoeangeru2]

A mi también me está pasando lo mismo, te aviso si logre´ resolver.

[@carlosvquiroz8484]

yo ya pude resolverlo te envio como lo resolvi

[@carlosvquiroz8484]

@@hoeangeru2 login.ts import { Component, Input, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { ApiAuthorizationService } from '../api-authorization.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { loginImg = '../assets/images/elements/thumbnail_customlogo.png'; constructor(private apiAuth: ApiAuthorizationService, private router: Router) { if (this.apiAuth.TokenData) { this.router.navigate(['/']); } } Email: string; Password: string; ngOnInit() { } loginAuth() { this.apiAuth.loginAuth(this.Email, this.Password).subscribe(res => { if (res.Success === true) { this.router.navigate(['/']); } }); } }

[@carlosvquiroz8484]

@@hoeangeru2 api-authorization.service.ts import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { AuthResult } from '../models/AuthResult'; import { TokenRequest } from '../models/TokenRequest'; import { map } from 'rxjs/operators'; const httpOption = { headers: new HttpHeaders({ 'Content-Type' : 'application/json' }) }; @Injectable({ providedIn: 'root' }) export class ApiAuthorizationService { readonly APIUrl = "localhost:44302/api"; private userSubject: BehaviorSubject public get TokenData(): any { return this.userSubject.value; } constructor( private _http: HttpClient) { this.userSubject = new BehaviorSubject(JSON.parse(localStorage.getItem('Token'))); } loginAuth(Email: string, Password: string): Observable { return this._http.post(this.APIUrl + '/Authmanagement/Login', { Email, Password }, httpOption).pipe( map(res => { if (res.Success === true) { const Token: any = res.Token; localStorage.setItem('Token', JSON.stringify(Token)); this.userSubject.next(Token); } return res; }) ); } logoutAuth() { localStorage.removeItem('Token'); this.userSubject.next(null); } }

[@carlosvquiroz8484]

@@hoeangeru2 auth.guard.ts import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; import { ApiAuthorizationService } from './api-authorization.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private router: Router, private ApiAuth: ApiAuthorizationService) { } canActivate(route: ActivatedRouteSnapshot) { const Token = this.ApiAuth.TokenData; if (Token) { return true; } this.router.navigate(['/Login']); return false; } }