En primer lugar, no estoy seguro de que esta sea la mejor manera de manejar este problema, pero lo que estoy buscando es un protector de ruta en "/" que verifique si el usuario ha iniciado sesión, si es así para redirigirlo a "/dashboard" . Me gustaría hacer esto antes de que se cargue la ruta, para evitar que una pantalla parpadee ya que estamos verificando el estado de autenticación en un servidor remoto.
Estoy implementando la interfaz canActivate, pero no funciona como se esperaba. Accede al servicio de autenticación y devuelve al usuario, que de acuerdo con este código de prueba debería redirigir al usuario, pero en su lugar veo al usuario en la consola pero no a la redirección.
Aquí está el código
import { Injectable } from '@angular/core'; import { Router, CanActivate } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import { User } from './../../models/user.model'; import { AuthService } from './auth.service'; @Injectable() export class HomeAuthGuard implements CanActivate { constructor( private router: Router, private authService: AuthService ) {} canActivate(): Promise<boolean> { return new Promise((resolve) => { this.authService.getStatus() .then(function (user: User) { console.log('home auth', user) this.router.navigate(['/dashboard']); resolve(false); }) .catch(function () { resolve(true); }); }); } }Esto sucede debido a 'este' enlace. Lo más probable es que su código vaya al bloque de captura después de console.log debido al hecho de que 'esto' no es su instancia de clase de componente. Utilice la "flecha gorda" para resolver este problema. me gusta:
return new Promise((resolve) => { this.authService.getStatus() .then((user: User) => { console.log('home auth', user) this.router.navigate(['/dashboard']); resolve(false); }) .catch(err => { resolve(true); }); })