page - Angular2-enrutador-salida con estructura de inicio de sesión

router events angular 6

Question

Estoy creando la aplicación angular2 y actualmente tengo un componente de inicio con barra de navegación, barra de herramientas y salida de enrutador para el contenido principal. Quiero agregar una página adicional para el mecanismo de inicio de sesión, por lo que si el usuario no está autenticado, la página de inicio de sesión se mostrará en toda la pantalla y, luego de iniciar sesión, el usuario se dirigirá al componente con la estructura anterior.

¿Cómo puedo gestionar esta estructura? ¿Necesito dos salidas de enrutador? ¿El primero para la navegación entre el inicio de sesión y las páginas de inicio y otro para el contenido principal en la página de inicio? ¿Alguna otra estructura común que sea más simple que dos salidas de enrutador?

Answer 1

En primer lugar, recomiendo utilizar el enrutador Angular2 actualizado. El enrutador más nuevo incluye soporte para guards que se agregan a la configuración de su ruta para evitar el acceso a ciertas rutas.

Después de asegurarte de tener el enrutador más reciente, deberás hacer varias cosas:

1) Cree un componente de nivel superior y llame a esta App . Aquí es donde irá su <router-outlet> .

2) Crear un componente de Login . Este componente debe incluir un formulario para iniciar sesión en su aplicación, junto con la lógica para manejar el inicio de sesión. Crear una ruta para este componente.

3) Crea un componente de Home (ya lo has hecho).

4) Use un guard (nueva funcionalidad en el enrutador más reciente) para evitar que los usuarios accedan al componente de la casa antes de iniciar sesión.

Su código tendrá un aspecto similar a este (para obtener más información, consulte: https://medium.com/@blacksonic86/upgrading-to-the-new-angular-2-router-255605d9da26#.n7n1lc5cl )

// auth-guard.ts
import { Injectable } from ''@angular/core'';
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from ''@angular/router'';

import { AuthService } from ''./services/auth/auth.service'';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authService.isLoggedIn()) {
      return true;
    }

    this.router.navigate([''login'']);
    return false;
  }
}

Para más información sobre guardias:

También sugeriría leer el último enrutador angular (los documentos se han actualizado recientemente): https://angular.io/docs/ts/latest/guide/router.html

Answer 2

Logro lograr este flujo de trabajo implementando esta estructura. Tengo dos componentes principales:

LoginComponent cuya ruta es ''/ login''. HomeComponent que es la ruta es ''''. (ruta vacía).

Además, puse un protector para mi HomeComponent que verifica si el usuario está autenticado en su canActivate. Si no, navego con el usuario a la ruta ''/ login''.

Luego, en mi componente de inicio tengo una plantilla con la siguiente estructura: barra de herramientas, menú lateral y salida de enrutador.

Lo último que tengo que hacer es configurar otras rutas de aplicaciones como rutas secundarias de mi HomeComponent. (por ejemplo: ''/ news'' es una ruta secundaria de '''').