El primer paso es configurar tus routes.
const appRoutes: Routes = [
{ path: '', redirectTo:'login', pathMatch : 'full'},
{ path: 'login', component: AuthComponent },
{ path: 'main', component: InicioComponent,canActivate:[AuthGuard],children: [
{ path: 'Dashboard1', component: DashboardComponent},
{ path: 'Dashboard2', component: DashboardComponent2 },
]}
];
Lo que hace es que tu ruta principal seria el login, para eso usas el redirectTo. Bajo esta el main o tu pagina principal, si te percatas en el main existe un canActive donde configuaras las condiciones por la cual puede ser redirigido al main, en este caso puede ir al main si y solo si esta logueado, esto es de ejemplo.
Esto es lo que contiene mi AuthGuard:
auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router : Router){}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (sessionStorage.getItem('token_fks') != null)
return true;
this.router.navigate(['/login']);
return false;
}
}
Al hacer login retorna un token y evalúo el token si existe ingresa al main caso contrario redirige al login.
El AuthGuard debe estar declarado en providers dentro de tu app.module.ts:
app.module.ts
providers: [
AuthGuard,{
provide : HTTP_INTERCEPTORS,
useClass : AuthInterceptor,
multi : true
},],
A esto también se suma un AuthInterceptor, que lo que hace es que cada petición o los diferentes servicios que uses de un usuario logueado en cada momento evalue si este token existe y si el servicio al que consultas te lo recibe o rechaza. En un caso de error de token te lo debe redireccionar al login, de esta manera cierras el ciclo. Por ultimo te muestro lo que tengo en AuthInterceptor, para que tengas una mejor idea de como lo puedes llevar a tu proyecto:
auth.interceptor.ts
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import {catchError, tap} from 'rxjs/operators';
import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private router: Router) {
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (sessionStorage.getItem('token_fks') != null) {
const clonedreq = req.clone({
// headers: req.headers.set("Authorization", "Bearer " + sessionStorage.getItem('token_fks'))
});
return next.handle(clonedreq).pipe(
tap((ev: HttpEvent<any>) => {
if (ev instanceof HttpResponse) {
if(ev.body!=null){
//Aqui evaluas el / los objetos que retornen en el body de los servicios que consultes.
}
}
}),
catchError( (error) => {
//Evaluas cualquier error si gustas implementas mensajes que alerten al usuario.
if (error.status === 401)
this.router.navigateByUrl('/login');
return throwError(error);
}));
}
else {
this.router.navigateByUrl('/login');
}
}
}
Espero te sea de utilidad. De todos modos existe full información en la web de como implementar logins en angular.