0

Tengo un formulario login de Administrador con email y password. Cuando se ingresan estos datos, utilizo el servicio authService.getAdmin(email, password), este servicio envia los datos a NodeJs para comprobar si el admin existe, si existe me devuelve los datos del admin. Cuando Angular recibe la respuesta de que existe el admin, redirige automaticamente a la view de administrador admin-principal. Hasta este punto lo pude lograr. El problema esta en que ahora, esa view admin-principal esta protegida con un Guardian, y lo que necesitaria lograr es que, cuando Angular sepa de que el admin existe, el guardian me permita acceder a la view.

aca mi app-routing.module.ts donde tengo el Guardian en el path: admin-principal

import { AdminGuard } from './admin.guard';
const routes: Routes = [
  {
    path: 'admin-login',
    component: AdminLoginComponent
  },
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'admin-principal',
        pathMatch: 'full',
      },
      {
        path: 'admin-principal',
        canActivate: [AdminGuard],
        component: AdminPrincipalComponent
      },
    ]
  },
];  

Aca mi guardian admin.guard.ts

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return false;
  }

aca mi servicio auth.service.ts

API = 'http://localhost:4000/admin/login';

  constructor(private http: HttpClient) { }

  getAdmin(email: string, pass: string) {
    const state: boolean = true;
    // console.log(state, email, pass);
    return this.http.post<Admin[]>(this.API, {email, pass, state});
  }
  

aca mi admin-login.component.ts

 export class AdminLoginComponent implements OnInit {

  form: FormGroup;
  admin = {} as Admin;
  adminExist: boolean = true;

  constructor(
    private formBuilder: FormBuilder,
    // public adminService: AdminService,
    private authService: AuthService,
    private router: Router
    ) {
    this.buildForm();
  }

  ngOnInit(): void {
  }

  buildForm() {
    this.form = this.formBuilder.group({
      email: ['', [Validators.required, Validators.maxLength(50)]],
      password: ['', [Validators.required, Validators.maxLength(50)]],
    });
  }

  login(event: Event){
    event.preventDefault();
    if (this.form.valid){
      const email = this.form.get('email').value;
      const pass = this.form.get('password').value;
      this.authService.getAdmin(email, pass)
      .subscribe(admin => {
        // si no obtuvo el admin
        if (admin.length === 0){
          this.adminExist = false;
          console.log('no existe el administrador');
        }
        else{
          console.log(admin);
          sessionStorage.setItem('adminEmail', admin[0].email);
          this.router.navigateByUrl('admin-principal');
        }
    });
    }
  }

aca el formulario en admin-login.component.html

<form [formGroup]="form" (ngSubmit)="login($event)">
    <div class="form-group">
        <input type="email" class="form-control" formControlName="email" (ngModelChange)="adminExist = true" placeholder="@email">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" formControlName="password" (ngModelChange)="adminExist = true" placeholder="password">            
    </div>
    <button type="submit" class="btn btn-primary table">Login</button>
</form>
<div *ngIf="!adminExist">
    <p class="text-center text-danger">No existe el administrador</p>
</div>

2 respuestas 2

2

Hay varias cuestiones de seguridad a tomar en cuenta para el control de usuarios, contraseñas y sesiones que no se están tomando en consideración.

Pero para responder tu pregunta: podés aprovechar que estás guardando en el sesionStorage la información del admin para utilizar esa data en el guardian:

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
       return sessionStorage.getItem('adminEmail');
  }

Con lo que estás diciendo "si existe la información del admin en el sesionStorage, es porque ha iniciado sesión.


Por otro lado también podés hacer uso del AuthService para guardar/obtener esa información.

2
  • Gracias @Nery Ortez excelente!, tienes razón cuando dices que Hay varias cuestiones de seguridad a tomar en cuenta para el control de usuarios, contraseñas y sesiones que no estoy tomando en consideración. ya que estoy aprendiendo Angular. El administrador seria yo solo, por eso queria algo simple, cuando haga la parte de usuarios, si voy a tener en cuenta otro tipo de consideraciones, gracias por tu aporte!
    – Claudio
    Commented el 27 oct. 2020 a las 20:05
  • A la orden! Si la respuesta te ayudó podés marcarla como aceptada para ayudar a otros
    – Nery Ortez
    Commented el 27 oct. 2020 a las 20:59
0

La solución fue en la funcion login, si el admin existe, guardo los datos en una sessionStorage. En mi caso guarde un objeto en la sessionStorage, para tener toda la informacion del admnistrador.

login(event: Event){
    event.preventDefault();
    if (this.form.valid){
      const email = this.form.get('email').value;
      const pass = this.form.get('password').value;
      this.authService.getAdmin(email, pass)
      .subscribe(admin => {
        // si no obtuvo el admin
        if (admin.length === 0){
          this.adminExist = false;
          console.log('no existe el administrador');
        }
        else{
          // objeto Admin
          let admi = {} as Admin;
          admin.forEach(element => {
            admi = element;
          });
          console.log(admi);
          // sessionStorage solo permite guardar un string, como yo quiero guardar un objeto de tipo Admin
          // tengo que usar JSON.stringify(admi)
          sessionStorage.setItem('adminData', JSON.stringify(admi));
          this.router.navigateByUrl('admin-principal');
        }
    });
    }
  }

en admin.guard.ts pregunto si la sessionStorage('adminData') existe. Si existe hago un return true para habilitar la view.

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    /* esta sessionStorage se crea en admin-login.component.ts, cuando el email y password
      son correctos*/
      if (sessionStorage.getItem('adminData') === null){
        return false;
      }
      else{
        return true;
      }
    }

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.