Angular Guard 重定向到根目录答案

【问题标题】：Angular Guard redirect to rootAngular Guard 重定向到根目录
【发布时间】：2018-09-29 02:07:24
【问题描述】：

我创建了一个守卫来处理我的身份验证，我使用canActivate 来激活这个守卫。但是，当我转到将要进行身份验证的路由时，会在短时间内重定向根 URL，然后它会转到预期的 URL。我不希望用户看不到预期的页面，所以我的问题是，有没有办法阻止它进入该根 url？

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  this.router.navigate(['/painel/login']);
  return true;
}

【问题讨论】：

你也可以分享你的 routing.ts 文件吗
你的路由配置肯定有问题。请在问题中也分享这一点，有人将能够查看它。

标签： angular

【解决方案1】：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  this.router.navigate(['/painel/login']);
  return true;
}

您的守卫实现不正确。它必须

如果允许用户导航到受保护的路线，则返回 true、或 true 的承诺或可观察到的发射 true
如果不允许用户导航到受保护的路线，则返回 false，或者一个 false 的承诺，或者一个 observable 发出的 false。

在第二种情况下，由于您还想显示登录页面（而不仅仅是阻止被保护的路由被激活），那么您可以导航到登录路由。

但是你的守卫总是告诉路由器允许用户去被守卫的路由（所以，路由器允许导航），它也告诉它导航到登录页面（所以，然后，它去登录页面）。

所以你的后卫应该看起来像

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if (!this.isAuthenticated()) {
      this.router.navigate(['/painel/login']);
      return false;
  }
  return true;
}

【讨论】：