Una pregunta segun como estan los siguientes archivos ¿que me hace falta para que me quede configurado o privatizado la ruta entre el acceso de login al dashboard?, me explico lo que yo quiero hacer es que no pueda ingresar a la pagina del dashboard sin antes haberme logueado, despues de loguearme podre acceder al dashboard ya que es confidencial para usuarios que no se encuentran en el sistema o no tienen una credencial. Como tal el login ya lo tengo autorizado de que si no ingreso credenciales no pueda ingresar, esta vez en resumen lo que quiero lograr es que si coloco la ruta Localhost:4200/Proyecto/dashboard
no me deje ingresar al dashboard si no que me deje en login ya que no estoy autorizado a entrar sin credenciales.
Estos son mis archivos de angular , espero que pueda asesorarme para ver que me hace falta.
auth-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from '../pages/dashboard/dashboard.component';
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'dashboard', component: DashboardComponent}
]
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports:[RouterModule]
})
export class AuthRoutingModule { }
login.component.html
<div class="hold-transition login-page">
<div class="login-box" animate__animated animate__fadeOut>
<div class="login-logo">
<a href="login.component.html"><b>LOGIN VESPOT</b></a>
</div>
<!-- Inicio Formulario Login -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Bienvenido a Vespot SAS</p>
<a href="./login.component.html" class="brand-link">
<img src="./assets/dist/img/LogodeVespot.png" alt="AdminLTE Logo" class="img-circle elevation-4 "
style="opacity: .8" style="width:30%;margin-left:35%">
</a>
<form [FormGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
<div class="input-group mb-3">
<input type="email" formControlName="email" class="form-control" placeholder="Correo">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope" style="color: rgb(48, 37, 37);"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" formControlName="password" class="form-control" placeholder="Contraseña">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock" style="color: rgb(48, 37, 37);"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember" class="ml-2">
Recordar inicio de sesion
</label>
</div>
</div>
<!-- Iniciar sesion-->
<div class="col-4" style="margin-left: 74%;">
<button type="submit" class="btn btn-light">Entrar</button>
</div>
<!-- Iniciar sesion -->
</div>
</form>
<div class="social-auth-links text-center mb-3 " id="my-signin2">
</div>
<!-- Adicionales -->
<p class="mb-1">
<a href="forgot-password.html" class="badge badge-light">Recordar contraseña</a>
</p>
</div>
<!-- Adicionales -->
</div>
</div>
<!-- Fin Formulario login -->
</div>
login.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(private readonly router: Router) { }
loginForm = new FormGroup({
email: new FormControl(),
password: new FormControl()
})
private user: any = {
email: '[email protected]',
password: '123456'
}
public login(data: any) {
if (data.email == this.user.email && data.password == this.user.password) {
localStorage.setItem('token', 'true');
return this.router.navigate(['dashboard']);
}
return alert('Email o contraseña invalidos')
/* Hacer un servicio que lea el api como las credenciales que se estan pasando en este formulario
Cuando se reciban , hay que almacenarlos en un sitio */
}
}
auth.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [LoginComponent],
exports:[LoginComponent],
imports: [
CommonModule,
RouterModule,
FormsModule,
ReactiveFormsModule
]
})
export class AuthModule {}
pages.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [LoginComponent],
exports:[LoginComponent],
imports: [
CommonModule,
RouterModule,
FormsModule,
ReactiveFormsModule
]
})
export class AuthModule {}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PagesModule } from './pages/pages.module';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ToastrModule } from "ngx-toastr";
import { AuthModule } from './auth/auth.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
PagesModule,
AuthModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 3000,
extendedTimeOut: 3000,
positionClass: "toast-top-right",
progressBar: true,
closeButton: true,
progressAnimation: "increasing",
preventDuplicates: true,
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
auth.routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{path: 'login', component: LoginComponent}
]
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports:[RouterModule]
})
export class AuthRoutingModule { }
admin.guards.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class AdminGuard implements CanActivate {
constructor(private readonly router: Router) { }
canActivate(): boolean {
const token = localStorage.getItem('token')
if (token) {
return true;
} else {
this.router.navigate(['login']);
return false;
}
}
}
/* cREAR UN SERVICIO QUE RECIBA EL TOKEN Y LO ALAMCENE EN EL LOCAL STORAGE, Y EN BASE A ESE TOKEN SI EL ROL QUE DEVULEVE ES ADMINISTRADOR ENTONCES QUE EL GUARD DEVUELVA TRUE DE LO CONTRARIO QUE DEVUELVA FALSE */
user.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class UserGuard implements CanActivate {
constructor(private readonly router: Router) { }
canActivate(): boolean {
const token = localStorage.getItem('token')
if (token) {
return true;
} else {
this.router.navigate(['login']);
return false;
}
}
}
auth.routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{path: 'login', component: LoginComponent}
]
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports:[RouterModule]
})
export class AuthRoutingModule { }