0

La verdad es que soy nuevo en esto de angular. tengo dificultades con los guard ya que no he podido crear uno para poder crear un login en la web app que estoy desarrollando. si alguien me puede facilitar un ejemplo que sea claro de un login en angular 7. ya que hace dias coloque mi problema pero nadie pudo darme informacion de esto.

2 respuestas 2

0

No se si ya has generado todos los archivos necesarios o que estructura quieres tener en el proyecto. Yo siempre tengo un guard y un service de autenticación, esos son los comandos para generarlos:

  • Guard:
ng generate guard auth
  • Service:
ng generate service auth

auth.service.ts:

Siempre creo todos lo métodos de autenticación de la aplicación aquí, como por ejemplo, el iniciar sesión, el registro, el cerrar sesión, etc.

export class AuthService {

  isLoggedIn: boolean;

  constructor() {
    this.isLoggedIn = false;
  }

  signIn() {
    // Aquí las comprobaciones que tengas que hacer con la base de datos si es usuario o no
    this.isLoggedIn = true;
  }

  signOut() {
    this.isLoggedIn = false;
  }
}

auth.guard.ts:

Aquí el guard revisa si esta logueado o no, cada vez que alguien intenta entrar a una ruta que tiene el canActivate: [AuthGuard].

export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService, private router: Router) { }

  canActivate(): boolean {
    if (!this.auth.isLoggedIn) {
      this.router.navigate(['/login']); // Si es falso lo devuelve a la página login o a la que tu quieras
      return false;
    }
    return true;
  }

}

app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'page1', component: Page1Component, canActivate: [AuthGuard] },
  { path: 'page2', component: Page2Component, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '/login' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Después en el login.component.ts llamas al método de signIn() del auth.service.ts.

Espero haberte ayudado. Saludos

2
  • si me funciona pero no mantiene la sección, cuando refresco ya no funciona. alguna idea de como solucionarlo ? Commented el 4 may. 2019 a las 18:12
  • 1
    Deberías gastar el localStorage o el sessionStorage dependiendo si quieres que la sesión se guarde después de cerrar el navegador o no.
    – Pacne
    Commented el 5 may. 2019 a las 9:30
0

he hecho parecido como indica Pacne, me funciona normal, solo hay pequeño fix, navego en mis rtuas , rytas hijas, etc, todo validadao con el localStorage, y obteniendo servicios de un backend, pero si por ejemplo estoy en una ruta hija (route child), y le doy f5, (mi guard si valida que esta autentificado como admin u otro rol, como menciono cuando navego), pero por ejemplo voy al dashboard (que es una route child), y le doy f5, el guard me manda los roles null, vuelvo a dar f5 y ahora si me detecta, lo que yo creo que ni bien carga el documento, busca primero el guard antes de acceder al component, por ello le sale vacio, aunque no deberi, ya que en el auth.isLoggedIn (analogo al mio), yo pido del localStorage, pero me da null, como dije se soluciona con un f5, pero no deberia pasar eso, no se si tienes una idea o algo a buscar mas especifico. gracias, saludos

2
  • donde guardas los roles, tambien deberian estar en el localstore, aunque esto que hice aca tenia otro enfoque, actualmente uso tokens Commented el 28 jul. 2020 a las 0:46
  • gracias, lo pude solucionar, solo buscando en el localStorage, estaba usando algo erroneo, gracias por responder igualmente Commented el 29 jul. 2020 a las 4:46

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.