0

Buenos días. Estoy realizando una aplicación en Angular 4, la cual hace una petición http a una API para realizar el login inicial, de modo que, si la petición da un resultado, se haga visible la parte privada de la aplicación.

A continuación muestro el código del servicio que realiza la petición:

import { Injectable } from '@angular/core';
import { Http, Response, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable} from 'rxjs/Observable';

@Injectable()
export class loginService{

    public url:string;
    public autenticado:boolean;

    constructor(private _http:Http){
       this.url = "url de la API";
    }

    getValAuth(){
        console.log("Get Val:"+this.autenticado);
    }

    getLogin(data:any){

        this.url = this.url+"?param + datos procedentes del formulario de login;
        return this._http.get(this.url, {params: data})
            .map(res => res.json());


    }
}

Y a continuación muestro el componente donde se inyecta el servicio:

import { Component } from '@angular/core';
import {LoginModel} from './login.model';
import { loginService } from '../services/login.service';

@Component({
  selector: 'form-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [loginService]
})
export class loginComponent {

  public inicio_Sesion:LoginModel;

  constructor(private _resultado:loginService){
    this.inicio_Sesion = new LoginModel("","");
  }

  ngOnInit(){

  }

  onSubmit(isValid:boolean){  
   this._resultado.getLogin(this.inicio_Sesion).subscribe(
     result=>{
        if(result.count == 1){
          this._resultado.autenticado = true;
        }else{
          this._resultado.autenticado = false;
        }
     },
     error=>{
       var errorMessage = <any>error;
       console.log(errorMessage);
     }
   );

  }


}

Y en el app.component tengo la estructura completa, la cual tiene que mostrarse una parte u otra en función del resultado de la llamada HTTP.

¿Alguna sugerencia que me pueda orientar en como hacer esto? Muchas gracias por adelantado.

1 respuesta 1

0

Te aconsejo que utilices las características de routing de Angular. Puedes activarlas utilizando:

ng new mi-aplicacion --routing true

Tendrás que definir un fichero de ruteo para el componente raíz (app-module) y para el resto de componentes sobre los que quieras enrutar (redirigir).

De esta manera podrás chequear tu variable booleana de login exitoso redirigiendo a un nuevo componente que contenga la parte privada.

Aún así te aconsejo que controles los enrutamientos con un token de sesión para mejorar la seguridad de tu aplicación.

Aquí tienes un enlace donde explica de manera sencilla como enrutar con Angular. http://academia-binaria.com/enrutado-con-angular2-el-nuevo-spa/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.