I am creating an application in Angular 4 but I do not know what is happening that my router is protected with my Guard but it does not redirect me to the login page when I try to enter a forbidden URL, it could indicate me that I am doing wrong
I leave the code
auth-guard.services.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { UserService } from './user.service';
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(private userService : UserService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state : RouterStateSnapshot) {
window.alert(this.userService.isValid());
if(this.userService.isValid()!=true) {
this.router.navigate(['login']);
window.alert("No puedes ver esta pagina");
return false;
}
return true;
}
}
user.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class UserService {
constructor() { }
isValid(): boolean {
return false;
}
}
app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './auth-guard.service';
import { UserService } from './user.service';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { GestionDeClientesComponent } from './gestion-de-clientes/gestion-de-clientes.component';
import { TodosLosClientesComponent } from './todos-los-clientes/todos-los-clientes.component';
import { AutoasignacionComponent } from './autoasignacion/autoasignacion.component';
import { AutorespuestaComponent } from './autorespuesta/autorespuesta.component';
import { ChatbotsComponent } from './chatbots/chatbots.component';
import { ConfiguracionComponent } from './configuracion/configuracion.component';
import { ConversacionComponent } from './conversacion/conversacion.component';
import { RespuestasComponent } from './respuestas/respuestas.component';
import { DatosDelContactoComponent } from './datos-del-contacto/datos-del-contacto.component';
import { InstalacionComponent } from './instalacion/instalacion.component';
import { IntegracionesComponent } from './integraciones/integraciones.component';
import { EstadisticasComponent } from './estadisticas/estadisticas.component';
import { CuentaComponent } from './cuenta/cuenta.component';
import { PerfilDeUsuarioComponent } from './perfil-de-usuario/perfil-de-usuario.component';
import { DatosDeLaEmpresaComponent } from './datos-de-la-empresa/datos-de-la-empresa.component';
import { AdministrarUsuariosComponent } from './administrar-usuarios/administrar-usuarios.component';
import { FacturacionYpagosComponent } from './facturacion-ypagos/facturacion-ypagos.component';
import { PlanesComponent } from './planes/planes.component';
import { AyudaComponent } from './ayuda/ayuda.component';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuardService]},
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: 'mi-cuenta/gestion-de-clientes/:id', component: GestionDeClientesComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/gestion-de-clientes/todos/:id', component: TodosLosClientesComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/gestion-de-clientes/autoasignacion/:id', component: AutoasignacionComponent , canActivate: [AuthGuardService]},
{ path: 'mi-cuenta/gestion-de-clientes/autorespuestas/:id', component: AutorespuestaComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/chatbots/:id', component: ChatbotsComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/chatbots/configuracion/:id', component: ConfiguracionComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/chatbots/conversacion/:id', component: ConversacionComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/chatbots/respuestas/:id', component: RespuestasComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/chatbots/datos-del-contacto/:id', component: DatosDelContactoComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/chatbots/instalacion/:id', component: InstalacionComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/chatbots/integraciones/:id', component: IntegracionesComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/estadisticas/:id', component: EstadisticasComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/:id', component: CuentaComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/perfil-de-usuario/:id', component: PerfilDeUsuarioComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/datos-de-empresa/:id', component: DatosDeLaEmpresaComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/administrar-usuarios/:id', component: AdministrarUsuariosComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/facturacion/:id', component: FacturacionYpagosComponent, canActivate: [AuthGuardService] },
{ path: 'mi-cuenta/planes/:id', component: PlanesComponent, canActivate: [AuthGuardService] },
{ path: 'ayuda', component: AyudaComponent },
//{ path: 'inicio/:id', component: DetallesComponent },
{ path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
declarations: [
AppComponent,
HomeComponent,
PageNotFoundComponent,
LoginComponent,
RegisterComponent,
GestionDeClientesComponent,
TodosLosClientesComponent,
AutoasignacionComponent,
AutorespuestaComponent,
ChatbotsComponent,
ConfiguracionComponent,
ConversacionComponent,
RespuestasComponent,
DatosDelContactoComponent,
InstalacionComponent,
IntegracionesComponent,
EstadisticasComponent,
CuentaComponent,
PerfilDeUsuarioComponent,
DatosDeLaEmpresaComponent,
AdministrarUsuariosComponent,
FacturacionYpagosComponent,
PlanesComponent,
AyudaComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }