navigationend - Angular2: Global Guard(el usuario debe estar conectado siempre)

singleton angular 4 service

Question

Estoy construyendo una aplicación donde no hay acceso para usuarios no autenticados.

Escribí un LoggedInGuard , pero ahora tengo que agregar canActivate: [LoggedInGuard] a cada ruta dentro de la configuración de mi enrutador (excepto el LoginComponent ).

¿Hay una mejor manera de hacer que esto funcione?

El diseño de mi archivo / módulo se ve así:

app/
  AppModule
  AppRoutingModule
  AppComponent

  authentication/
    AuthenticationModule
    AuthenticationRoutingModule
    LoginComponent

  contacts/
    ContactsModule
    ContactsRoutingModule
    ContactListComponent

  users/
    UsersModule
    UsersRoutingModule
    UserEditComponent

  ...

Tal vez sea posible crear dos espacios de enrutamiento separados (uno para iniciar sesión, otro para el resto de la aplicación) y aplicar el protector solo al resto de la parte de la aplicación .

Espero que haya una solución simple.

¡Gracias por adelantado!

Answer 1

Creo que lo hago de una manera mucho más lógica. Supongo que es una opinión. Separa mi aplicación por secured pages y public pages . Yo uso plantillas para cada conjunto. Entonces, public component y secure component ponen el guard sobre la secure template .

Asegúrese de agregar [Guard] a la ruta completa que necesita protección.

Entonces, cuando aseguro una ruta, agrego los padres a app.routing.ts

const APP_ROUTES: Routes = [
    { path: '''', redirectTo: ''/home'', pathMatch: ''full'', },
    { path: '''', component: PublicComponent, data: { title: ''Public Views'' }, children: PUBLIC_ROUTES },
    { path: '''', component: SecureComponent, canActivate: [Guard], data: { title: ''Secure Views'' }, children: SECURE_ROUTES }
];



export const routing = RouterModule.forRoot(APP_ROUTES);

Asegúrate de que esta línea se note,

 { path: '''', component: SecureComponent, canActivate: [Guard], data: { title: ''Secure Views'' }, children: SECURE_ROUTES }

Entonces creo 2 diseños

/ público / todos los componentes públicos

/public/public.routes.ts

/ seguro / todos los componentes seguros

/secure/secure.routes.ts

Rutas seguras

Tenga en cuenta que estas rutas no necesitan Guard ahora porque la maneja la plantilla principal.

export const SECURE_ROUTES: Routes = [
    { path: '''', redirectTo: ''overview'', pathMatch: ''full'' },
    { path: ''items'', component: ItemsComponent },
    { path: ''overview'', component: OverviewComponent },
    { path: ''profile'', component: ProfileComponent },
];

Principales rutas en app.routing.ts

const APP_ROUTES: Routes = [
    { path: '''', redirectTo: ''/home'', pathMatch: ''full'', },
    { path: '''', component: PublicComponent, data: { title: ''Public Views'' }, children: PUBLIC_ROUTES },
    { path: '''', component: SecureComponent, canActivate: [Guard], data: { title: ''Secure Views'' }, children: SECURE_ROUTES }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

Y en el directorio / diseños, creo un diseño que es

/layouts/secure.component.ts

/layouts/secure.component.html

/layouts/public.component.ts

/layouts/public.component.html

Todo se enruta a través del diseño public o secure y [Guard] está seguro.

Luego manejo la autenticación con un token en el almacenamiento local.

@Injectable()
export class Guard implements CanActivate {

    constructor(protected router: Router, protected auth: Auth ) {}

     canActivate() {
        if (localStorage.getItem(''access_token'')) {
            // logged in so return true
            return true;
        }
        // not logged in so redirect to login page
        this.router.navigate([''/home'']);
        return false;
    }
}

Una vez que configuro mi aplicación de esta manera, puse todas las rutas que deben estar seguras en el directorio seguro y las rutas públicas en público. Luego creo sus rutas en el archivo public.routes.ts o en el archivo secure.routes.ts que están en su directorio respectivo.

Answer 2

Pude proporcionar un conjunto de protecciones globales que abarcaban múltiples módulos al mover las guardias a un detector de eventos de enrutador.

Para que el detector de eventos active todas las solicitudes, lo inserté en el componente de aplicación.

Tenga en cuenta que, en ambos ejemplos a continuación, aún puede agregar guardias personalizados para rutas individuales, y eso seguirá funcionando.

Sin guardias

Puede eliminar el uso de guardias y, en su lugar, implementar la lógica directamente en el detector de eventos.

import { Component, OnInit } from ''@angular/core'';
import { Router, RoutesRecognized } from ''@angular/router'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/operator/filter'';

// I use a service to keep track of the authentication ticket.
// Replace this with whatever mechanism you use.
import { AuthenticationService }  from ''./_services/index'';

@Component({
  selector: ''app-root'',
  templateUrl: ''./app.component.html'',
  styleUrls: [''./app.component.css'']
})
export class AppComponent implements OnInit {
  constructor(
      private router: Router,
      private authService: AuthenticationService
  ) {}

  ngOnInit() {
    this.router.events
    .filter(event => event instanceof RoutesRecognized)
    .subscribe((event: RoutesRecognized) => {
      const url = event.urlAfterRedirects;

      // Public URLs don''t need any kind of authorization.
      if (url === ''/public'' || url.startsWith(''/public/'') || url.startsWith(''/public?'')) {
        return;
      }

      // Everything else must be authenticated.
      if (!this.authService.isAuthenticated()) {
        // Allow for the login page to redirect back to the originally
        // requested page.
        this.router.navigate([''/public/login''], { queryParams: { returnUrl: state.url } });
      }
    });
  }
}

Las solicitudes que se pasan a cualquier subpágina de /public pasarán independientemente, pero cualquier otra solicitud debe tener autenticación, o se redirigirá a /public/login .

Tenga cuidado de que la página de redirección no se encuentre en el área protegida, de lo contrario, el enrutador ingresará un bucle infinito.

Con guardias

La implementación a continuación muestra cómo reutilicé las guardias existentes. Esto es solo si necesita conservarlos, o si hace que su código sea más limpio.

import { Component, OnInit } from ''@angular/core'';
import { Router, ActivatedRoute, RoutesRecognized, CanActivate } from ''@angular/router'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/operator/filter'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/mergeMap'';

// Reused guards.
import { AdminGuard, AuthGuard } from ''./_guards/index'';


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

  constructor(
      private route: ActivatedRoute,
      private router: Router,
      private adminGuard: AdminGuard,
      private authGuard: AuthGuard
  ) {}

  ngOnInit() {
    this.router.events
    .filter(event => event instanceof RoutesRecognized)
    .subscribe((event: RoutesRecognized) => {
      // Public pages don''t require authentication.
      if (this.isSubPage(event, ''/public'')) {
        return;
      }

      // All other requests MUST be done through an
      // authenticated connection.  The guard performs
      // the redirection for us.
      if (!this.callCanActivate(event, this.authGuard)) {
        return;
      }

      // Administration pages require additional restrictions.
      // The guard performs the redirection for us.
      if (this.isSubPage(event, ''/admin'')) {
        if (!this.callCanActivate(event, this.adminGuard)) {
          return;
        }
      }
    });
  }

  callCanActivate(event: RoutesRecognized, guard: CanActivate) {
    return guard.canActivate(this.route.snapshot, event.state);
  }

  isSubPage(event: RoutesRecognized, parent: string) {
    const url = event.urlAfterRedirects;
    return (url === parent
        || url.startsWith(parent + ''/'')
        || url.startsWith(parent + ''?''));
  }
}

Este ejemplo es el mismo que el anterior, pero con protección adicional para el área /admin , lo que garantiza que el usuario también tenga permisos administrativos.