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

我的目标是在不触及应用程序中的每个路线防护的情况下绕过路线守卫，但我无法做到这一点。最终我创建了一个新的RouteBypassService来注入每个路线守卫。 RouteBypassService实现shouldBypass，如果路由警卫应允许导航某些超越带外原因（例如授权），则返回true。在我的情况下，如果没有用户登录，shouldBypass将返回true。（在他们退出后，我们让他们离开屏幕，无论如何）。

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

Answer 3

在这里，您可以按每次导航强制绕过。就我而言，在用户提交包含帐户信息的表单后，我导航回到了帐户仪表板。

理想情况下，您将检查表单中未保存的更改并基于此进行绕过，但是我的表单尚不具有该功能。

表单组件：

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

路由器防护：

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

   constructor(private router: Router) {}

   canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {

      // gets nav object IF one exists
      const navObject = this.router.getCurrentNavigation()

      // bypass the form guard based on navigation state
      // (used when navigating out after form submit)
      if (navObject && navObject.extras.state && navObject.extras.state.bypassFormGuard) {
         return true
      }

      // perform normal checks
   }
}

Angular4路由：绕过Route Guard强制导航

3 个答案: