Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

331
Vistas
Angular4 Routing: Force Navigation By Bypassing Route Guard

When my users have dirty changes on a screen, I have a route guard to prompt them to save or discard when they try to navigate away.

However, if I am logging them out due to inactivity, I want to force navigation and bypass the route guard (by discarding their changes), in order to ensure that their screen is blanked.

How can I bypass route guards?

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

My solution was as follows:

My logout method after successfully logging out, redirects the app to the /login route:

@Injectable
export class AuthService {
  // ...
  logout () {
    // do logout
    this.router.navigate(['/login']);
  }
}

My guard is then as follows:

@Injectable
export class DiscardChangesGuard implements CanDeactivate<MyComponent> {

  canDeactivate(component: MyComponent, currentRoute: ActivatedRouteSnapshot,
                currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean> | boolean {

    if (nextState.url === '/login') {
      return true; // bypass checks if we are trying to go to /login
    }

    // perform regular checks here
  }
}
about 4 years ago · Santiago Trujillo Denunciar

0

Here's how you can force a bypass on a per-navigation basis. In my case I was navigating back to the account dashboard after the user submits a form with account info.

Ideally you would check for unsaved changes in the form and bypass based on that, but my forms don't have that feature yet.

form component:

this.router.navigateByUrl('/', { state: { bypassFormGuard: true } })

router guard:

@Injectable()
export class ExitFormGuard implements CanDeactivate<ComponentCanDeactivate> {

   constructor(private router: Router) {}

   canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
      if (this.router.getCurrentNavigation()?.extras?.state?.bypassFormGuard) {
         return true
      }

      // perform normal checks
   }
}

about 4 years ago · Santiago Trujillo Denunciar

0

My goal was to bypass route guards without touching every route guard in the app, but I was unable to do that. Ultimately I created a new RouteBypassService to inject into every route guard. RouteBypassService implements shouldBypass, which returns true if the route guard should allow navigation for some overriding out of band reason, such as authorization. In my case shouldBypass returns true iff there is no user signed in. (After they sign out, we let them get off the screen no matter what).

It's not ideal because every author of a route guard has to affirmatively remember to add the bypass, but it's not terribly entangling.

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda