Angular Autenticación simple con Nodejs, Mongodb, Express y JWT (Parte 2/2) 

Buenas, ya supe arreglar el error de Bearer null, lo que pasa es que el programa va asi: 1. Cuando se inicia sesión y se pulsa el botón de inicio de sesión, se ejecuta el método signIn del componente, este método llama al metodo signIn de AuthService, el cual hace una petición post a '/api/signin'. 2. Cuando se hace esta petición POST se ejecuta y se devuelve el token, pero antes de ejecutar el callback de la función signIn() del componente signIn, lo primero que pasa es que se ejecuta el Token Interceptor ya que se ejecuta en todas las peticiones (Lo cual le añade a dicha petición la cabecera 'Authorization', esta petición es de la que Fazt Code muestra la cabecera). Por lo que se añade la cabecera 'Authorization: Bearer null' debido a que justo en ese momento no hay nada guardado en Local Storage porque no se ha ejecutado el callback mencionado y por lo tanto no se ha ejecutado setItem() (A Fazt Web le sale un token en la cabecera porque nunca borró el token almacenado en el Local Storage en la petición anterior). 3. Después de ejecutarse el Token Interceptor, se ejecuta el callback del metodo signIn() del componente signIn, y en este momento es donde se cambia el Local Storage (Después de haberle añadido la cabecera Authorization a la petición POST de '/api/signin'), por lo que nos podemos mover por las páginas con el token correcto. CONCLUSIÓN: Realmente que salga Bearer Null es totalmente normal, no es que este mal, lo que pasa es que Fazt Code no debería haber mostrado la cabecera de la petición POST a '/api/sigin' porque en esa obviamente va a salir 'Authorization: Bearer null' si se ha borrado el token de la petición anterior o si es la primera vez que se inicia sesión por primera vez después de ejecutar ng serve. SOLUCIÓN: En verdad no hay nada que solucionar porque el código esta bien, pero para comprobar que nos estamos moviendo con un usuario correcto, podemos hacer en AuthService o en otro servicio una petición get a cualquier página y en el backend gestionar esta petición descifrando el token del localStorage y devolviendo un json con usuario con el que estamos autenticados, podremos observar que efectivamente estamos autenticados con el usuario correcto. Esto es algo como lo siguiente: Petición get en el AuthService: inicio() { return this.http.get(this.URL + 'api/inicio').subscribe( res => { console.log(res); }, err => console.log(err) ) } Petición get en el Backend: router.get('/inicio', verifyToken, async (req, res) => { let _id = req.userId; let usuario = await User.findOne({_id}) res.json({usuario}) }) También si nos da cosa que la cabecera se nos añada cuando no haya token almacenado en el Local Storage, podemos modificar la función intercept() del Token Interceptor de la siguiente manera (Simplemente se añade un if para, si esta el token almacenado en el Local Storage se añade la cabecera y si no, pues no se añade): intercept(req: HttpRequest, next: HttpHandler): Observable { const token = localStorage.getItem('token'); if (token) { const tokenizeReq = req.clone({ setHeaders: { Authorization: `Bearer ${this.authService.getToken()}` } }) return next.handle(tokenizeReq) } return next.handle(req) }

Gracias por compartir Fazt, sigue así ! ;) En el minuto 37:45 , no me almacenaba el valor en el local Storage con la sintaxis que maneja Fazt , lo que me funciono fue sustituir: res.token -> res['token'] Por si alguien le sucede lo mismo.

Fazt te ruegoque hagas el perfil, es que no puedo y no hay videos en youtube del tema

Excelente video, lo unico que no sirve es que en mi el localstorage me retorna nulo cuando hago el interceptor, sabes a que se pueda deber?, alguienn que me ayude porfavor gracias 🙌🙌

Para los que les aparezca en la cabecer el Bearer null esto os pasa porque seguramente antes de hacer el login borrais el token... Él en el video no lo borra por eso le aparece el token junto al Bearer, pero es el token de la peticion anterior no de la que acaba de hacer el login. Esto de que salga null pasa porque intenta hacer el ' getItem() ' antes de que se haga el ' setItem() ' entonces por eso retorna null, porque aun no ha sido seteado. Respecto a como resolver esto no tengo ni idea de como hacerlo ya que es un problema de sincronización de estos dos metodos. Hay alguien que lo sepa arreglar porfavor ?

El getToken devuelve null, alguna idea de por qué?

!! ERROR!! "Can't resolve all parameters for SignupComponent in c:/Users/JM COMPUTER/Desktop/desarrollo/angular/Blog/fronend/src/app/component/signup/signup.component.ts: ([object Object], ?).ng" quien sabe como se soluciona pls 😥

La parte 1 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rPD0eY3dRqQ.html

Authorization: bearer null -> error... SOLUCION depues de un dia :''( de revisar.... esto me funciono.... en el file app.modules.ts -> declarations [appCom.., SignIntC..,SignupC.. etc ] (debe de estar en ese orden, debe ejecutarse primero el signintcomponent... )

Hola a todos de favor me podríasn ayudar con este problema quiero enviar un mensaje a un usuario suscrito cuando se acerca una fecha/hora (nodejs, angular.js 8 y firebase) Quiero poder enviar un mensaje a un usuario vía sms , dada una fecha y hora por ejemplo 24/01/2020 14:00:00 enviarle 24 horas antes un mensaje, estoy usando twilio para enviar vía sms, pero la cuestión es como programo el evento para hacer lo que quiero , un usuario registrar un evento , y a partir de ese evento quiero que todos los que estan subscritos a ese evento , reciban una notificacion cuando el evento se acerca 24hs antes. Alguien que hubiese hecho algo parecido , le agradecería su ayuda.

Excelente me sirvió muchísimo, me quedo una duda sobre la seguridad. Que pasa si alguien logra manipular el local storage creando un item llamado 'token'? Ganaría entrada rutas privadas instantáneamente, no es peligroso? Cómo alternativa no habría que validar el token contra el back en el guard?

Fazt Developer Yotuber 2019 -> N° 1 Gracias por tus conocimientos impartidos en este 2019. Para el 2020 lo mejor para ti. Saludos

SOLUCION AL BEARER NULL: Clase: token-interceptor.service.ts import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http' import { Observable } from 'rxjs'; intercept(req: HttpRequest, next: HttpHandler): Observable { const token = this.authService.getToken() if (!token) return next.handle(req); const tokenizeReq = req.clone({ headers: req.headers.set('Authorization',`Bearer ${token}`) }); return next.handle(tokenizeReq); }

Como decodificas el token que guardas en el localstorage ?

en ".subscribe()" me da error dise "la propiedad subscribe no existe en el tipo void" pido solucion pls😭

Gracias como siempre estimado Fazt, quería consultarte como se pordría manejar con Vue, saludos

Que gran explicación, solo tengo una petición, podrías darnos una recomendación u orientación de que arquitectura necesitaremos para el despliegue de los servidores? Es decir que servidores requerimos para desplegarlo en producción

Buen tutorial, como siempre. Pero se agradecería si tú o quien lo sepa, pueda decir dónde es mejor hacer el deploy, a bajo precio y con el mínimo de demora en consultas a la base de datos. Muchas gracias!

Fazt, primero que todo, gracias por compartir tus conocimientos. Segundo, si harás unos cursos de larga duración, deberías tener agua a mano, porque te comenzarás a desgastar la garganta, y queremos un Fazt eterno xD

mis respetos y gracias

Super, gracias por tus enseñanzas, podrias hacerla esta parte pero con REACT?

Por mas que trato no logro Hacer el perfil del usuario 😔😔😔😔😔

si Puedes hacer un ejemplo de jwt +MERN se te agradeceria bastante tambien

Excelente Fazt, me salvaste la vida

Que mal.. el interceptor me da null, crea el token despues y supongo que cuando concatena el Bearer con el token queda null =/ alguna idea de como solventarlo?

una duda, en el signup al momento de hacer el register en hace un registro exitoso pero consola se ve { _id: 5e259da83908bf19e4d5997f, email: '', password: '', } pero al momento de hacerlo en insomnia si muestra los datos completos { _id: 5e259da83908bf19e4d5997f, email: 'useremail@user.com', password: 'contraseña', } me pueden ayudar por favor, como hago para que desde la app guarde los datos correctamente

Alguno habeis conseguido arreglar el Barer null cuando haces el singin?

Para los que les da null el bearer esta es la "solucion", en si, siempre dara null, pero con este codigo evitamos que se cree ese header en caso no exista, al ser un interceptor, se llamara en cada request asi que en el proximo request, ya estara rellenado, bueno aqui les dejo el codigo intercept(req,next){ let token=this.authService.getToken() if(!token){ return next.handle(req); } const tokenizeReq=req.clone({ setHeaders: { Authorization:`Bearer ${token}` } }) return next.handle(tokenizeReq); } mas info de los interceptors aqui: medium.com/@asfo/usando-http-interceptors-en-angular-a665ebe6350b ya parece stackoverflow la seccion de comentarios jajajaja

A Mi me paso algo muy curioso jaja con lo del Bearer null, intente las formas que estaban lo comentarios, y volvi a la de @fazt y funciono jajaja y despues probe el navegador en modo privado y que creen, no funciono :(

Alguien me podria decir en que parte del codigo ya sea la carpeta del backend o el frontend , tendria que poner los archivos img? porque en ningun lado del codigo vi que tenga una carpeta public. Muchas Gracias.

Te amo

Buenas Fazt, Ahora mismo puedo registarme incluso sin poner nada, para ello tendría que hacer validaciones, pero no sé muy bien cómo es. Alguien podría ayudarme? Lo he intentado de mil formas pero nada, y me gustaría que siguiera unos parámetros para poder registrarse

Se agradece crack

Hola Fazt muy buen tutorial, pero tengo una duda... ¿Siempre se debe usar el subscribe en los componentes? por ejemplo, si en el services login utilizo async/await en la llamada http hacia la api y retorno un objeto, no es necesario que en mi componente me suscriba al método login del services? Entiendo que el subscribe es para que espere la respuesta de la api ya que es una llamada asíncrona y así poder manipular los datos o tiene mas funcionalidades el subscribe en angular. Sigue con el canal !!! Saludos!

¿Que te parece si unos de tus proyectos como por ejemplo este lo siguieras e hicieras una tienda simple virtual con un blog o Forum Integrado? Entonces si que serias un Crack, porque eso no lo ha hecho en Ýoutube hasta ahora nadie. De todas formas para mí tu eres un Crack

Y que se hace en el caso de que el token caduque ?????????

Cuál es el siguiente video donde se profundiza o se refuerza el login y registro con angular?

39:40 Sublime >:3

Muchas gracias! me fue muy útil para terminar de asentar unos conceptos que no me habían quedado muy en claro en el curso que estaba haciendo!

Gracias por tu trabajo hermano, he aprendido mucho gracias a ti, sigue con ello, animo y suerte.

fazt como obtengo el header de la peticion post de tu signin ?? ya que tu lo estas mandando como data el token pero lo ideal no seria como en uno de tus videos de jwt que mandaste en su cabecera.

Hola tuve que cambiar a public sobre authService, en el constructor de app.component. Ya que me salia problemas porque decia que Property 'authService' is private and only accessible within class 'AppComponent'. Solo así pudo funcionar. Alguien sabe porque si le funciono a Fazt con private?

Hola amigo gracias por tu tiempo.... pero tengo una duda en uno de tus videos donde tome todo como ejemplo, enviar el auth-token en el header.... en agular como capturo valor?

Como por ejemplo una tienda Virtual con un Forum o Blog. Solamente es una sugerencia y yo te encuentro como el mejor youtuber de Programación

podría decirme alguien porque no puedo usar? ng, me dice que le falta la signatura digital

Muchas gracias justo lo que necesitaba para comprender tokesn saludos desde bolivia

Alguien sabe porque no funcionan las rutas en un hosting?

Muchas gracias fazt!, me ayudo mucho para ir aprendiendo angular

Tengo este error: ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Cual es el link del del video de Backend ?

Privéit no, práivet.

Excelente amigo, me han ayudado bastante tus tutoriales.

Hola Fazt, una consulta, a mi el localstorage me retorna nulo cuando hago el interceptor, sabes a que se pueda deber?

que pasa si alguien abre el navegador y en el localStorage ingresa manual un token (inventado), el front lo deja pasar?

Puedes hacer un ejemplo de jwt +MERN? O jwt + electron? , PD gracias por todo tu exelente trabajo.

Todo bien todo corecto pero como obtengo los datos del usario logueado, el perfil? en el backend lo obtengo con postman pero con angular es diferente

Fazt code o alguien me podria responder porque el modulo de cors(); no me esta funcionando ? tengo el error de las cabeceras pero el modulo de cors() no me quiere funcionar, alguien mepodria ayduar porfavor ?

Hola!! Estoy teniendo problemas con el token-interceptor, al parecer está tomando el token antes de cambiarlo en el localStorage, por lo que si el localStorage estaba null, lo guarda en el RequestHeader null y si tenía otro token, guarda ese token anterior y luego el localStorage es que lo actualiza. Porfa auxilio!

Gracias Fazt excelente video

Hola muchas gracias por tus videos, me han servido muchisismo y explicas bastante bien. A la hora de hacer este practica lo estaba haciendo yo con la base de datos Mysql y a la hora de asignar el token me sale lo siguiente " Authorization: bearer null " No se por que suceda esto ya estuve intentando de todo

Hola, muy buen video! Una salvedad: luego del 1:00:00 entiendo que se estaría acoplando al servicio con código de la vista, y luego en el siguiente template a este con código del servicio. Excelente tu canal, gracias por compartir!! 👏🏻👏🏻👏🏻

Excelente el video, solo tengo un problema. No esta tomando el valor del token la cabecera, es como que si primero para el token-interceptor y despues guarde el token en localstorage, haciendo que cuando pasa el token-interceptor no guarde la cabecera.

Fazt Te amo

Gracias por el video fazt infinitamente sigue asi eres el mejor todo mi universidad uhispam nicaragua no adentramos a ver tu tutoriales ere grande bro ♥

Excelente video .!

Muchas gracias... tienes algo con React?

Amigo una pregunta cuál es la mejor opción para guardar el token?

Aprendo un montón con tus vídeos, gracias crack.

Aun espero la parte 3, me gusto mucho!!

Geniales tus videos de Angular!

Fazt ¿Donde es mejor Guardar el JWT del lado del cliente?

El perfil del usuario como lo consumo en angular?

grax x compartir, tengo un detalle que no logro solucionar, al poner mismo codigo de authService (1:05:00) me tira el siguiente error error TS2341: Property 'authService' is private and only accessible within class 'AppComponent al sacarle la propiedad private al component, tira otro error, se lo vuelvo a poner y carga correctamente, pero si cancelo el server y lo vuelvo a cargar con ng serve tira nuevamente el primer error, alguna sugerencia?

aplicaste la lolita ayala amiko :v

Muchas gracias Fazt!!

Super!!!

hola que tal , quería saber si alguien de casualidad sabe como almacenar los datos del usuarios en el LocalStorage ???

Fazt por favor o alguien me puede explicar una duda que tengo referente al servidor y frontend? resulta que estamos aqui haciendo el frontend con angular hasta ahi perfecto, pero queria saber si las vistas(web) que hicimos en otros videos de este canal referente con .hbs puede trabajar independiente'? me explico: cuando suba la web tendrá un dominio con sus rutas, pero luego cuando suba el servidor tendrá otro dominio distinto para acceder a las rutas de hbs? lo que pretendia era crear una interface en el lado del servidor para añadir datos al servidor y a parte la web principal para clientes, eso es posible o lo estoy haciendo mal? y en el caso de estar haciendolo mal porque lo hicimos asi en este video del canal? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--bI0diefasA.html espero que alguien me coneste para aclarar las dudas, gracias

Oye bro no tendrá seguimiento este login para realizarlo más robusto