Javascript 如何优化canActive的代码

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

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

---

实际上它看起来不错，但我可以给你一个小建议

如果他未通过

身份验证

，请将他注销，然后从浏览器中清除他的详细信息，因为他不是有效用户，我们不需要他的详细信息（至少在我的预期中）

---

我希望这有帮助……）

如果你喜欢短的，这就是你所期望的吗

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

---

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

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

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

但是，如果需要先保存JWT to token变量，可以使用以下方法：

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

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

---

您正在通过

路线

，并且

状态

，但您没有使用它们。让我解释一下应该如何使用这两种方法

让我们假设这是您在

app.routing.ts

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

你可以看到我们也在传递一个角色。您也可以在此处传递任何其他相关信息。一旦有了这些信息，就可以使用

route:ActivatedRouteSnapshot

，因为它允许您获取传递的信息，您可以这样做：

route.data.role

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

现在让我们谈谈

状态

。想象一下，在某个时刻，您的令牌过期，或者您出于任何原因失去了对应用程序的访问权并注销。一旦您重新登录到应用程序，您可能希望被带到离开的地方。这是

state

允许我们做的，因为它可以访问当前的URL/路由。将这些内容结合起来，

路由

和

状态

，您可以执行以下操作：

route.data.role

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

现在，当您被重定向到登录页面时，您的路由器查询参数中将有returnUrl，您可以轻松地使用它重定向到最后访问的页面

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

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

根据“canActivate”方法，可以返回boolean或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;
  }
}

---

它在我的情况下是有效的，但是如何优化它呢？？是否有任何代码行需要删除？？？好的，但为什么建议从localstorage中删除所有条目？它可以保存有用的信息一旦用户注销或警卫强制删除用户数据，总是有好处的。@Walter我认为匿名用户没有任何有用的信息。@ganesh045它取决于实现，localstorage可以保存有关所选语言、货币、主题、，第二种情况是：您已登录并且在LS中有一些信息，然后您注销（有意或会话过期）。在您的解决方案中，您清除了LS。下次登录时，您的数据将消失。我同意@WalterŁuszczyk的说法-这取决于实现。通常我将令牌/角色存储在sessionStorage或localStorage中，在用户注销时将其删除，其他信息（如语言）存储在cookie中。因此，您应该编辑您的答案，因为它确实取决于实现。canActivate返回true或false，因为在RoutingModule中，或者在您有路由的地方，您指定必须由JWT进行身份验证，因此不需要重定向到那里。