Necesito hacer una aplicación en la que, en el primer ingreso, se muestre un login y nada más, ningún navbar, etc. Al poner usuario y contraseña, uno loguearía a la app y ahí ya podría usar el concepto de single-page app de angular. ¿Cómo puedo hacer eso?
1 respuesta
No es necesario tener tu login separado de la aplicación principal, lo que puedes hacer es que al momento de definir las rutas principales de la aplicación, implementes un Route guard.
Un Route guard te permite controlar/restringir el acceso que tiene tu usuario a distintas partes/rutas de tu aplicación, por ejemplo, si tus rutas se ven así:
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
// Todas tus rutas privadas
{
path: 'home',
component: HomeComponent,
canActivate: [ AuthGuard ]
},
{
path: 'about',
component: AboutComponent,
canActivate: [ AuthGuard ]
}
// etc...
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ]
// etc...
})
export class AppModule {}
Fijate que dentro de las rutas privadas agregué una propiedad llamada canActivate
(existen más opciones, como canDeactivate
, canActivateChildren
, etc) y lo que hace es chequear si la clase que le pasas se adhiere a la interfaz canActivate
y de ser así, que es lo que retorna el método canActivate
de tu clase (debe ser un boolean
). De satisfacer la condición, el usuario entonces puede acceder a esa ruta.
El AuthGuard
se vería algo así:
@Injectable()
export class AuthGuard implements CanActivate {
// AuthService es el supuesto servicio dedonde chequeas si el usuario está logeado o no
constructor( private authService: AuthService ) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
// isAuthenticated() te retornaría true o false según el usuario esté logeado o no
return this.authService.isAuthenticated();
}
}
Y luego como en tu login no quieres mostrar el resto de los elementos principales de la aplicación, que me imagino están en app.component
podrías hacer algo así...
@Component({
template: `
<!-- Muestra eso sólo si está logeado -->
<ng-container *ngIf="isLoggedIn">
<!-- Acá iría tu header, navbar, etc... -->
</ng-container>
<router-outlet></router-outlet>
`
// etc...
})
export class AppComponent {
isLoggedIn: boolean;
// etc...
}
Es decir, muestras los elementos transversales sólo si estás logeado, así no se muestran en el login.
También podrías dejar tu app component solo con el router-outlet
, y usar otro componente que tenga los elementos transversales, este teniendo su propio router-outlet
para renderear los componentes privados, así te preocupas inicialmente sólo de mostrar este o el componente de login si el usuario está logeado.
ng
no hace tanto, solo genera esqueletos vacíos, pero no cumple deseos. Consulta la documentación [github.com/angular/angular-cli#usage] para sepas como funciona, te puede interesar especialmente la generación de componentes y módulos.