change - Enrutamiento condicional Angular2

router events angular 6

Question

Esta podría ser una pregunta básica, pero en Angular2, ¿hay alguna manera de hacer enrutamiento condicional? O, ¿alguien haría eso fuera del enrutador?

Sé que ui-router tenía cierta capacidad para hacer esto, pero no he visto nada similar en el enrutador Angular2s

Answer 1

Como se mencionó, los guardias de ruta angular son una buena manera de implementar rutas condicionales. Dado que el Tutorial Angular es un poco amplio sobre el tema, aquí hay un breve resumen de cómo usarlos con un ejemplo.

1. Hay varios tipos de guardias. Si necesita algo de la lógica if (loggedIn) {go to "/dashboard"} else { go to "/login"} , entonces lo que está buscando es el CanActivate -Guard. CanActivate se puede leer como "La nueva ruta X se puede activar si se cumplen todas las condiciones Y" . También puede definir efectos secundarios como redirecciones. Si esto no se ajusta a su lógica, consulte la página de Tutorial Angular para ver los otros tipos de guardas.

2. Crea un auth-guard.service.ts .

3. auth-guard.service.ts el auth-guard.service.ts con el siguiente código:

import { Injectable } from ''@angular/core'';
import {CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot} from ''@angular/router'';

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isLoggedIn = false; // ... your login logic here
    if (isLoggedIn) {
      return true;
    } else {
      this.router.navigate([''/login'']);
      return false;
    }
  }

}

4. Registre auth-guard.service.ts en su módulo de ruta. Además, agregue el par clave-valor canActivate:[AuthGuardService] a todas las rutas que desee proteger. Debería verse algo así:

const appRoutes: Routes = [
  { path: '''', component: LandingComponent},
  { path: ''login'', component: LoginComponent},
  { path: ''signup'', component: SignUpComponent},
  { path: ''home'', component: HomeComponent, canActivate: [AuthGuardService]},
  { path: ''admin'', component: AdminComponent, canActivate: [AuthGuardService]},
  { path: ''**'', component: PageNotFoundComponent }
];

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

Eso debería empezar.

Aquí hay una demostración minimalista: https://stackblitz.com/edit/angular-conditional-routing

Answer 2

En caso de que necesite renderizar un componente específico en lugar de redirigirlo, puede hacer algo como eso:

const appRoutes: Routes = [
  {
    path: '''' ,
    component: (() => {
      return SessionService.isAnonymous() ? LoginComponent : DashboardComponent;
    })()
  } 
]

Utilicé este ejemplo para la página de destino, donde el usuario que no había iniciado sesión previamente vería la página de destino o el panel del panel.

Actualizar Este código funcionará en el entorno dev pero no se compilará y obtendrá este error:

ERROR en Error durante la compilación de plantillas de ''AppRoutingModule'' Las expresiones de función no son compatibles con los decoradores en ''ɵ0'' ''ɵ0'' contiene el error en src / app / app.routing-module.ts (14,25) Considere cambiar la expresión de la función a Una función exportada.

Para solucionarlo creé un módulo separado que se ve como sigue

import {LandingPageComponent} from ''../landing-page/landing-page.component'';
import {DashboardComponent} from "../dashboard/dashboard.component";
import {SessionService} from "../core/services/session.service";

const exportedComponent = SessionService.isAnonymous() ? LandingPageComponent : DashboardComponent;

export default exportedComponent;

y luego solo necesitas importar el módulo proporcionado por esa "fábrica"

import LandingPageComponent from ''./factories/landing-factory.component'';
const appRoutes: Routes = [
  {
    path: '''' ,
    component: LandingPageComponent
  },
]

Answer 3

actualizar

En el nuevo enrutador se pueden usar guardias en su lugar https://angular.io/guide/router#milestone-5-route-guards

original (para el enrutador desaparecido)

Implemente el gancho del ciclo de vida de CanActivate como se muestra aquí. Los ganchos del ciclo de vida en el enrutador Angular2 y devuelva falso si desea evitar la navegación. Consulte también https://angular.io/docs/ts/latest/api/router/CanActivate-var.html