Conectando el signin con el Backend

Clase 50 de 75 • Curso de MEAN 2017

Luis Felipe Evilla Rodríguez

student•

El código en la version 6 de angular quedaria así.
En el servicio.

signin(user: User): Observable<any> {
        const body = JSON.stringify(user);
        const headers = new HttpHeaders({ 'Content-Type': 'application/json'});
        return this.http.post(urljoin(this.usersUrl, 'signin'), body, { headers })
            .pipe(
                map( (response: any) => {
                    this.login(response);
                    return response;
                }),
                catchError(this.handleError)
            );
    }

    private handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
            console.error('An error ocurred: ', error.error.message);
        } else {
            console.error(
                error.error
            );
        }

        return throwError(
            'something bad happened; please try again later.'
        );
    }

En el componente

onSubmit() {
        if (this.signinForm.valid) {
            const { email, password } = this.signinForm.value;
            const user = new User(email, password);
            this.authService.signin(user)
                .subscribe(
                    this.authService.login,
                );
        }
    }

Roberto Ocando Morales

student•

Tengo una duda con respecto al authService… por que si llamamos a la funcion login dentro del metodo SignIn se debe llamar tambien en el subscribe que tenemos en el onSubmit del signinComponent?

Federico Ramato

student•

Probé llamándolo solo desde el sigin.component desde el subscribe y funciona bien, creo que fue un error ponerlo dos veces, porque no tiene sentido hacerle dos llamadas.

Roberto Ocando Morales

student•

Gracias Fede, excelente acotacion de todas maneras esperemos a ver si alguien nos aclara.

Walter Lensinas

student•

Buenos días, les paso el código del proyecto: https://github.com/wlensinas/platzi-overflow-wl/tree/50-signin

Steps:

git clone https://github.com/wlensinas/platzi-overflow-wl.git
git checkout 50-signin
npm install
npm start

Esta vez renegue mucho debuggeando, pero salio jeje.

Quimey Lucas Marquez

student•

Consulta a ver si me equivoco, Sacha en el AuthService, cuando hace el map, mete el objeto JSON en el metodo login que hizo en el servicio, eso no esta de mas? xq despues lo vuleve a hacer aca en el suscribe, me esta generando un poco de confusion eso y nada, si alguien me la saca estaría genial!!
mas alla de eso excelente nivel de curso!!

Carlos Enrique Ramírez Flores

student•

Excelente clase!!!

Sergio Toshio Minei

student•

Está bien que la redirección se ponga en el servicio? No debería de estar en el componente?

Roberto Bock

student•

opino lo mismo

David Daniel Castillo Nava

student•

Necesito ayuda me dice este error cuando agrego el auth.service al app.module.

ERROR in src/app/app.module.ts(22,29): error TS2306: File ‘C:/Users/Locos/Desktop/Platzi/MEAN/platzi-overflow/src/app/auth/auth.service.ts’ is not a module.

este es mi codigo en el auth.service

import { Injectable } from '@angular/core';
import { User } from './user.model'
import { Http, Headers, Response } from '@angular/http';
import { environment } from '../../environments/environment';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class AuthService {
	authUrl: string;
	currentUser?: User;

	constructor(private http: Http) {
		this.authUrl =  environment.apiUrl+'auth/'
		if(this.isLoggedIn()){
			const { userId, email, firstName, lastName } = JSON.parse(localStorage.getItem('user'));
			this.currentUser = new User(email, null, firstName , lastName, userId);
		}
	}

	signin(user: User) {
		const body = JSON.stringify(user)
		const headers = new Headers({ 'Content-Type': 'application/json' })
		return this.http.post(this.authUrl + 'signin', body, { headers })
			.map((response: Response)=> {
				const json = response.json();
				this.login(json);
				return json;
			})
			.catch((error: Response) => { 
				console.log(error);
				return Observable.throw(error.json());
			});
	}

	login({ token, userId, firstName, lastName, email }) {
		this.currentUser = new User(email, null, firstName, lastName,userId);
		localStorage.setItem('token', token);
		localStorage.setItem('user', JSON.stringify({ userId, firstName, lastName, email }));
	}

	isLoggedIn() {
		return localStorage.getItem('token') !== null;
	}
}

Espero me puedan ayudar.

Jonathan Jiménez

student•

El error te dice que no es un módulo, ya que realmente es un servicio, comprueba que lo estas añadiendo al array de providers y no al de imports.

si lo estás declarando en el sitio adecuado pon tu código del app.module para que podamos ayudarte.

saludos,

Jonathan Jiménez

student•

En mi caso me apareció el error igualmente, cerré la ejecución de la aplicación y la volví a lanzar y desapareció el error.

saludos,

Marco Castro

student•

tengo un pequeño problema ayuda por favor, Angular 6 xD

signin(user: User) : Observable<any> {
        const body = JSON.stringify(user);
        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

        return this.http.post(`${this.usersUrl}/signin`, body, { headers })
            .pipe(
                map((res: any) => {
                    const json = res.json();
                    this.login(json);
                    return json;
                }),
                catchError((error: HttpErrorResponse) => throwError(error)
            ))
    }

TypeError: res.json is not a function

Walter Lensinas

student•

La respuesta del servidor es un json, no hacen falta ponerlo en una variable y convertilar a json.

El map te quedaría así

map((res: any) => {
   this.login(res);
   return res;
})

Conectando el signin con el Backend

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más