Angular 4 and route protection with my Auth Guard

0

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 { }


    
asked by Anthony Medina 21.01.2018 в 04:23
source

1 answer

1

I've already found the solution

in app.modules.ts , in the providers at the end leave it like this

  providers: [AuthGuardService, UserService],

I do not know why it worked, but it worked

    
answered by 21.01.2018 в 04:29