Question

我该如何优化代码，我的同事告诉我该代码返回true和false，我已经做到了，但是，他说这不正确，并告诉我需要重新检查！

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.token = localStorage.getItem('JWT_TOKEN');
    if (!this.token) {
      return this.router.navigate(['mypage']);
    } else {
      return true;
    }
  }

Answer 1

如果您喜欢做空，那是您所期望的？

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  this.token = localStorage.getItem('JWT_TOKEN');
  return !!this.token || this.router.navigate(['mypage']);
}

Answer 2

实际上看起来不错，但是我可以提出一个小建议

如果他不是Authenticated，请先注销他，然后再从浏览器中清除他的详细信息，因为他不是有效用户，而且我们不需要他的详细信息（至少在我的预期中如此）。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.token = localStorage.getItem('JWT_TOKEN');
    if (!this.token) {
      localStorage.clear();
      this.router.navigate(['/login']); // better to log him out
      return false;
    } else {
      return true;
    }
  }

我希望这会有所帮助..：）

Answer 3

如果必须返回true或false，则可以使用以下方法：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return localStorage.getItem('JWT_TOKEN') !== null;
}

但是如果您需要先将JWT保存到令牌变量，则可以使用以下方法：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.token = localStorage.getItem('JWT_TOKEN')
    return this.token !== null;
}

Answer 4

您正在传递route和state，但您没有使用它们。让我解释一下如何使用这两个。

让我们想象这是您在app.routing.ts中的路径之一

{
 path: 'dashboard',
 component: DashboardComponent,
 canActivate: [AuthGuard],
 data: {role: 'merchant'}
}

您可以看到我们也正在扮演一个角色。您也可以在此处传递任何其他相关信息。有了这些信息后，就可以使用route: ActivatedRouteSnapshot了，因为它可以让您获取所传递的信息，并且您可以这样做：

route.data.role

现在让我们谈谈state。想象一下，您的令牌在某个时候到期，或者您出于任何原因失去对应用程序的访问权并注销。登录到该应用程序后，您可能希望被带到离开的位置。 state之所以可以这样做，是因为它可以访问当前的URL /路由。将route和state结合在一起，您可以执行以下操作：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.token = localStorage.getItem('JWT_TOKEN');

    // If your route depends on role as well, you can get it with route.data.role
    if (!this.token) {
      this.router.navigate(['login'], { queryParams: { returnUrl: state.url }}); 
      return false;
    } else {
      return true;
    }
  }

现在，当您重定向到登录页面时，您的路由器queryParams中将具有returnUrl，您可以轻松地使用它来重定向到上次访问的页面。

Answer 5

我的同事告诉我，这段代码返回true和false

似乎您的同事并没有要求您优化代码，他似乎建议方法“ canActivate”应该返回true / false，而不希望执行任何副作用，而您正在通过导航来执行到“ mypage”。

根据angular definition，“ canActivate”方法可以返回布尔值或UrlTree。因此，您不应在该方法内执行任何副作用。在您的情况下，您将导航到mypage URL，这是一个副作用。而是为mypage URL创建一个UrlTree并返回它，而angular将负责导航。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  this.token = localStorage.getItem('JWT_TOKEN');
  if (!this.token) {
    return this.router.createUrlTree(['/mypage']);
  } else {
    return true;
  }
}

如何优化canActive angular的代码

5 个答案: