Angular4路由:绕过路由防护强制导航

Question

当我的用户在屏幕上有脏的更改时，当他们试图导航离开时，我有一个路由守卫来提示他们保存或放弃。

但是，如果我因为不活动而将它们注销，我希望强制导航并绕过路线守卫(通过丢弃它们的更改)，以确保它们的屏幕是空白的。

如何绕过路由守卫？

Answer 1

我的解决方案如下：

我的logout方法在成功注销后，将应用程序重定向到/login路由：

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

我的警戒如下：

@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
  }
}

Answer 2

以下是如何在基于导航的上强制绕过。在我的例子中，我是在用户提交一个包含帐户信息的表单后导航回帐户仪表板的。

理想情况下，您应该检查表单中未保存的更改，并基于此绕过它，但我的表单还没有该功能。

表单组件：

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

路由器防护：

@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
   }
}

Answer 3

我的目标是在不接触应用程序中的每个路径守卫的情况下绕过路径守卫，但我无法做到这一点。最终，我创建了一个新的RouteBypassService注入到每个路由守卫中。RouteBypassService实现shouldBypass，如果路由守卫应允许出于某些覆盖带外原因(如授权)进行导航，则返回true。在我的例子中，如果没有用户登录，shouldBypass将返回true。(在他们退出后，我们让他们退出屏幕。)

这并不理想，因为每一个路径守卫的作者都必须肯定地记得添加旁路，但这并不是非常纠结。