0

Estoy intentando loguearme con una cuenta de Google en mi aplicación de Angular, al momento de ingresar deberia validar y redireccionarme a otro componente, de alguna forma lo hace, solo que al momento de hacerlo me aparece la información que contiene el componente al que me debia redireccionar y abajo me sigue apareciendo la vista de login. introducir la descripción de la imagen aquí

una vez ingresado muestra los dos componenes, el de administrador y el de login.

introducir la descripción de la imagen aquí

para poder solucionarlo tengo que refrescar la pagina y no quiero que lo haga asi. alguien me puede ayudar con alguna posible solución, de antemano gracias. introducir la descripción de la imagen aquí

este es el codigo del servicio.

export class AuthService {

  constructor(private  afsAuth:AngularFireAuth) { }

  registerUser(){}
  loginEmailUser(email:string, pass:string){
    return new Promise((resolve, reject)=>{this.afsAuth.auth.signInWithEmailAndPassword(email, pass)
    .then(userData => resolve(userData), 
    err => reject(err));
    });
  }
  loginFacebookuser(){}
  LoginGoogleUser(){
    return this.afsAuth.auth.signInWithPopup( new auth.GoogleAuthProvider());
  }
  logoutUser(){
    return this.afsAuth.auth.signOut();
  }
  isAuth(){
    return this.afsAuth.authState.pipe(map(auth=>auth));
  }

}

y este es el codigo del componente donde llamo el servicio para realizar el login.

export class LoginComponent implements OnInit {

  email = new FormControl('', [Validators.required, Validators.email]);

  constructor(public afAuth: AngularFireAuth, private router: Router, private authService: AuthService) { }

  getErrorMessage() {
    return this.email.hasError('required') ? 'Debe Ingresar un email valido' :
        this.email.hasError('email') ? 'Email invalido' :
            '';
  }


  ngOnInit() {
  }

  onLoginGoogle(): void{
    this.authService.LoginGoogleUser().then((res)=>{
      console.log('resss', res);
      this.onLoginRedirect();
    }).catch(err => console.log('err', err.message));
  }

  onLogout(){
    this.authService.logoutUser();
  }

  onLoginRedirect():void{
    this.router.navigate(['admin/administrator']);    
  }

}

esto es lo unico que esta en el componente administrator.

<p>administrador trabajando</p>

este seria el app.Routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './material/index/index.component';
import { LoginComponent } from './material/login/login.component';
import { RegisterComponent } from './material/register/register.component';
import { MainNavComponent } from './material/main-nav/main-nav.component';
import { AdministratorComponent } from './material/admin/administrator/administrator.component';

const routes: Routes = [
  {path: '', component: IndexComponent},
  {path: 'iniciar-sesion', component: LoginComponent},
  {path: 'registro', component: RegisterComponent},
  {path: 'admin/administrator', component: AdministratorComponent},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

este es el app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material/material.module';
import {MatInputModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout'; 
import { environment } from '../environments/environment';
import { FormsModule } from '@angular/forms';


import { AngularFireModule } from '@angular/fire'
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuth } from '@angular/fire/auth';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, 
    BrowserAnimationsModule, MaterialModule, MatInputModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
    FlexLayoutModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule,
    FormsModule,
  ],
  providers: [AngularFireAuth],
  bootstrap: [AppComponent]
})
export class AppModule { }

2 respuestas 2

0

Prueba dejando en el app.Routing.module :

 {path: 'administrator', component: AdministratorComponent},

y en el componente

 onLoginRedirect():void{
    this.router.navigate(['/administrator']);    
  }
1
  • no, no funcionó, creo que voy a poner un script para que la pagina se recargue una vez al momento de ingresar Commented el 15 may. 2019 a las 13:21
0

Tu problema está en la forma de hacer el routing, quizás no estás haciendo bien el lazy loading. Lo pongo como Respuesta porque no tengo los puntos suficientes para emitirte un comentario. Puedes poner más datos de tu código para revisarlo. Adiciona el app.component.html y el app.component.ts, verifica también si en la consola del navegador te está dando error a la hora de hacer el login, pues ahi me parece que está el problema. Si el servicio te da error, angular queda colgado y puede darte ese tipo de problema.

2
  • ok voy a poner mas info, lo siento si no soy muy claro, soy nuevo aqui y con Angular "Dificil combinación XD" Commented el 14 may. 2019 a las 18:51
  • amiga ya añadi un poco mas de información. te agradeceria si me puedes dar tu concepto Commented el 15 may. 2019 a las 12:07

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.