Saltar al contenido

Angulares guardias ruta principiantes tutorialDec, 29thIn este tutorial, vamos a aprender acerca de dos tipos diferentes de …

marzo 13, 2020

 

En este tutorial, vamos aprender acerca de dos tipos diferentes de guardias de ruta en el router angular con la ayuda de ejemplos.

Ruta guarda guardias

ruta nos ayudan a evitar el acceso de las rutas particulares en nuestra aplicación, y también evitar que los usuarios del cierre accidental de la aplicación.

CanActivate Guardia

CanActivate guardia se utiliza para proteger las rutas de modo que sólo los usuarios de inicio de sesión sólo pueden acceder a esas rutas.

En este ejemplo, estamos creando un servicio de inicio de sesión y autenticación guardia.

Nota: Es necesario clonar este repositiory para continuar.

Una vez que el repositorio clonado con éxito por encima de ahora crea un nuevo archivo llamado login.service.ts fileinside su carpeta de aplicación.

Ahora añada el siguiente código al archivo login.service.ts.

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'})

export class LoginService {

isLoggedin = false;
login() { this.isLoggedin = true;
}

logout() { this.isLoggedin = false;
}
}

En el código anterior, hemos creado una clase LoginService con dos métodos que se utilizan para cambiar theisLoggedin valor de la propiedad a verdadero o falso.

@Injectable decorador nos ayuda a inyectar este caso LoginService en la raíz de nuestra aplicación.

Ahora crea un nuevo archivo llamado auth.guard.ts dentro de la carpeta de aplicaciones y añadir el siguiente código.

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';import { Injectable } from '@angular/core';
import { LoginService } from './login.service';

@Injectable({
providedIn: 'root'
})

export class AuthGuard implements CanActivate {

constructor(private loginservice: LoginService) { }

canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot):
boolean
{
if (this.loginservice.isLoggedin) {
// if we return true user is allowed to access that route
return true;
} else {
// if we return false user is not allowed to access
return false;
}
}

}

En el código anterior, primero se importó CanActivate, ActivatedRouteSnapshot, RouterStateSnapshotfrom el paquete «@ angular / router y también nos importó LoginServicewe simplemente lo creó anteriormente.

Dentro AuthGuard constructor de la clase inyectamos LoginService e implementado método canActivate. El método

canActivate acepta dos parámetros que son devuelve el método ActivatedRouteSnapshot andRouterStateSnapshot

Si canActivate verdadera que permite a un usuario el acceso a dicha ruta de otra manera negar el acceso.

Usando CanActivate guardia

Ahora tenemos que elegir qué rutas necesitamos proteger en nuestra aplicación y agregar el canActivateproperty a dicha ruta sin pasar por AuthGuard que acabamos de crear.

La aplicación hemos clonado a partir de GitHub contiene ruta de los usuarios, estamos protegiendo esta ruta ahora.

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { ContactComponent } from './contact/contact.component';
import { NotfoundComponent } from '.
otfound
otfound.component';
import { UserinfoComponent } from './userinfo/userinfo.component';
import { AuthGuard } from './auth.guard';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'users', component: UsersComponent, canActivate: [AuthGuard], children: [
{ path: ':id', component: UserinfoComponent }
]
},
{ path: 'contact', component: ContactComponent },
{ path: 'contact-us', redirectTo: 'contact' },
{ path: '**', component: NotfoundComponent }
];

@NgModule({
declarations: [
AppComponent,
UsersComponent,
ContactComponent,
HomeComponent,
NotfoundComponent,
UserinfoComponent
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Ahora bien, si intentamos acceder a la ruta / usuarios en nuestra aplicación no se abre porque por defecto propiedad IsLoggedIn presente en el interior LoginService es falsa.

Vamos a crear un dos botones nuevos conectarse y desconectarse dentro de nuestro HomeComponent que nos ayuda a changeisLoggedin valor de la propiedad a cierto cuando se hace clic en una tecla de conexión y botón cambia a Salir falsa.

home page

import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(private loginservice: LoginService) { }

ngOnInit() {
}

handleLogin() {
this.loginservice.login();
}

handleLogout() {
this.loginservice.logout();
}
}

Aquí nos importó LoginService y se inyecta a HomeComponent constructor.

Ahora abra su aplicación en tu navegador y haga clic en el botón Inicio de sesión para acceder a la ruta de los usuarios.

CanActivateChild guardia guardia

canActivateChild nos ayuda a proteger las rutas secundarias en nuestra aplicación.

En nuestra aplicación actual, que tiene rutas secundarias dentro de la ruta usuarios de modo que ahora estamos creando un método CanActivateChild dentro auth.guard.ts a rutas secundarias protegen.

import {
CanActivate, ActivatedRouteSnapshot,
RouterStateSnapshot,
CanActivateChild} from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login.service';

@Injectable({
providedIn: 'root'
})

export class AuthGuard implements CanActivate, CanActivateChild {

constructor(private loginservice: LoginService) { }

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (this.loginservice.isLoggedin) {
// if we return true user is allowed to access that route
return true;
} else {
// if we return false user is not allowed to access
return false;
}
}

canActivateChild( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { //invoking the canActivate by passing route and state return this.canActivate(route, state); }
}

En el código anterior, estamos invocando el método canActivate dentro canActivateChild por passingroute y el estado porque tenemos la lógica ya dentro método canActivate.

Uso de la alerta niño CanActivate

Ahora tenemos que actualizar nuestro arsenal appRoutes pasando una nueva propiedad llamada canActivateChild

const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'users', component: UsersComponent,
canActivateChild: [AuthGuard], children: [
{ path: ':id', component: UserinfoComponent }
]
},
{ path: 'contact', component: ContactComponent },
{ path: 'contact-us', redirectTo: 'contact' },
{ path: '**', component: NotfoundComponent }
];

Eso es todo, ahora sólo los usuarios loggedin puede tener acceso a las rutas secundarias en nuestra aplicación. repositorio

Código