1

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.

introducir la descripción de la imagen aquí

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

1
  • Si te aprendes bien el contenido de estos vídeos sabrás como añadir un Guard a una ruta y como visibilizar Componentes (y rutas) en función del rol/permiso del usuario. ANGULAR GUARDS -> youtube.com/watch?v=Q3Hj9ItAdUM ANGULAR PERMISSION DIRECTIVES -> youtube.com/watch?v=6NKA6DWivWs Commented el 25 ene. 2022 a las 9:19

2 respuestas 2

1

Debería ser:

const routes: Routes = [

  {path: 'login', component: LoginComponent},
  {path: 'dashboard', component: DashboardComponent, canActivate:[UserGuard]}

]
5
  • hola muchas gracias si ya lo coloque pero sigue igual Commented el 24 ene. 2022 a las 21:32
  • no tengo idea de que mas pueda hacer? lo cloque como dijiste Commented el 24 ene. 2022 a las 21:52
  • en el auth-routing.module.ts Commented el 24 ene. 2022 a las 21:52
  • Posiblemente hay algo guardado en el token, validado con algúnos console.log en el guard.
    – Legna
    Commented el 24 ene. 2022 a las 23:12
  • Podrías editar tu respuesta y aclarar por que agregar ese fragmento de código solucionaría el problema? De ese modo aumentarás la calidad de tu respuesta, será mejor recibida y el autor de la pregunta podría aprender algo nuevo.
    – Dante S.
    Commented el 9 feb. 2022 a las 1:18
0

Mirando un poco por encima tus archivos, no se si estás generando módulos de más. También veo que declaras el componente LoginComponent en 2 módulos diferentes, y eso te dará error porque no está permitido (si lo quieres usar en 2 sitios diferentes debes meter el componente dentro de un módulo propio e importar ese módulo en donde quieras usarlo). En login.component.html tienes puesto [FormGroup]="loginForm" cuando debería ser en minúscula ([formGroup]="loginForm")

La solución a lo que preguntas es lo que te ha dicho @Legna, pero creo que tienes varios problemas más.

Para que te sirva de orientación, he creado un pequeño programa en stackblitz que te puede ayudar. El componente login está basado en tus archivos, el `UserGuard' también. Lo que he hecho diferente es que los componentes los he separado entre "públicos" y "privados" para diferenciar los que se acceden sin necesidad de estar autenticado de los que sí.

Si intentas acceder al Dashboard después de haber pulsado el botón "Salir" (ese botón quita la variable de LocalStorage) verás que te redirige al login.

Espero que te pueda servir de orientación para continuar.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.