如何优化 canActive angular 的代码

How can I optimize code for canActive angular

我如何优化那个代码,我的同事告诉我这个代码 returns 是对是错,我已经做了但是,他说它不正确并告诉我需要重新检查!

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

其实挺好看的,提个小建议

如果他不是 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;
    }
  }

希望对您有所帮助..:)

如果你更喜欢短,这是你所期望的?

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

如果你必须 return 真或假,你可以使用这个:

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

但是如果你需要先将JWT保存到token变量中,你可以使用这个:

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

您传递了 routestate 但您没有使用它们。让我解释一下这两个应该如何使用。

让我们假设这是您在 app.routing.ts

中的路径之一
{
 path: 'dashboard',
 component: DashboardComponent,
 canActivate: [AuthGuard],
 data: {role: 'merchant'}
}

你可以看到我们也在传递一个角色。您也可以在此处传递任何其他相关信息。一旦你有了它,使用 route: ActivatedRouteSnapshot 就有意义了,因为它允许你获得你传递的信息 - 你可以这样做:

route.data.role

现在让我们谈谈state。想象一下,在某个时候您的令牌过期或者您出于某种原因失去对应用程序的访问权限并被注销。一旦您重新登录到应用程序,您可能希望回到您离开的地方。这是 state 允许我们做的,因为它可以访问当前 URL / 路由。将这些东西组合在一起,routestate,你可以做这样的事情:

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,您可以轻松地使用它重定向到上次访问的页面。

my co-worker told me that this code returns true and false

看来你的co-worker不是让你优化代码,他好像暗示方法"canActivate"预计returntrue/false不预计执行任何 side-effects 并且您正在通过导航到 'mypage'.

来执行一个

根据 angular definition,"canActivate" 方法可以 return 布尔值或 UrlTree。所以你不应该在方法中执行任何 side-effects 。在您的情况下,您正在导航到我的页面 URL,这是一个 side-effect。相反,为我的页面 URL 和 return 创建一个 UrlTree,angular 将负责导航。

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