单击注销时如何在Angular中调用canDeactivate

Question

在我目前的退出电话中，我有这样的事情：

 getLogoutConfirmation(){
   // get confirmation in modal and perform logout
   // redirect to login page
 }

问题是，当执行注销并调用重定向到登录时，会在该路由上调用canDeactivate防护，但用户已经注销。

那么如何在执行注销之前调用canDeactivate guard，如果用户不想离开，则取消注销操作。

谢谢。

Answer 1

您应该导航到基于getLogoutConfirmation()的登录页面。如果你没有离开，那么CanDeactivate就不会被激活。

否则，当您从角度应用程序中导航离开当前视图或路线时，将调用Guard canDeactivate。您可以在canDeactivate中检查并获取getLogoutConfirmation，然后决定继续或取消导航。 CanDeactivate guard可用于处理未保存的更改，检查权限并清理组件。这不处理外部导航，例如浏览器刷新或关闭。你需要在这些情况下使用@HostListener('window:beforeunload')

Answer 2

只需在您的注销调用中调用CanDeactivate，并在那里做逻辑：

canDeactivate() {
  if(confirm('Leave and logout ?') {
    this.loginService.logout();
    this.router.navigate('');
    return true;
  } else {
    return false;
  }
}

canDeactivate只是一个接口的实现，你可以像调用任何函数一样调用它

Answer 3

我遇到了同样的问题，我通过创建一个处理ngOnInit（）中的注销功能的组件解决了它，然后重定向到登录页面

 ngOnInit() {
    this.authenticationService.logout();
    this.router.navigate(['/login']);
  }

这将导致路由被停用，从而调用canDeactivate后卫并显示确认

Answer 4

而不是立即注销，只需导航到您的目标（登录？）位置并添加一些额外的参数。然后在目标（登录？）位置添加“canActivate”防护，检查您的额外参数，并在那里进行实际注销。这样，注销不会干扰你的canDeactivate防护，并且会在正确的时间发生（如果canDeactivate说好）。

更改：

userLogout() {
  this.authenticationService.logout();
  this.router.navigate(['login']);
}

至：

userLogout() {
  this.router.navigate(['login'], { queryParams: { logout: true }});
}

在canActivate守卫中做这样的事情：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): ... {
  if ('true' === next.queryParamMap.get('logout')){
    this.authenticationService.logout();
  }