Angular CanDeactivate

interface

Interfaz que una clase puede implementar para ser un guardia que decide si una ruta puede desactivarse. Si todos los guardias regresan true, la navegación continúa. Si algún guardia regresa false, se cancela la navegación. Si algún guardia devuelve un UrlTree, la navegación actual se cancela y comienza una nueva navegación a la UrlTree regresó de la guardia.

Ver más…

interface CanDeactivate<T> {
  canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}

Descripción

El siguiente ejemplo implementa un CanDeactivate función que comprueba si el usuario actual tiene permiso para desactivar la ruta solicitada.

class UserToken {}
class Permissions {
  canDeactivate(user: UserToken, id: string): boolean {
    return true;
  }
}

Aquí, la función de protección definida se proporciona como parte de la Route objeto en la configuración del enrutador:

@Injectable()
class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}

  canDeactivate(
    component: TeamComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    return this.permissions.canDeactivate(this.currentUser, route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        canDeactivate: [CanDeactivateTeam]
      }
    ])
  ],
  providers: [CanDeactivateTeam, UserToken, Permissions]
})
class AppModule {}

Alternativamente, puede proporcionar una función en línea con el canDeactivate firma:

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        canDeactivate: ['canDeactivateTeam']
      }
    ])
  ],
  providers: [
    {
      provide: 'canDeactivateTeam',
      useValue: (component: TeamComponent, currentRoute: ActivatedRouteSnapshot, currentState:
RouterStateSnapshot, nextState: RouterStateSnapshot) => true
    }
  ]
})
class AppModule {}

Métodos