Angular 6 JWT 身份验证

Question

我正在使用 JWT 令牌保护我的 Angular 6 应用程序。我有一个身份验证服务来保护 UI 元素：

export class AuthService {

  constructor(
    private http: HttpClient,
    private router: Router,
    public jwtHelper: JwtHelperService,
  ) {}

  isAuthenticated(): boolean {
    return !this.isTokenExpired;
  }

然后我可以在我的组件中调用它：

<span class="page-nav" *ngIf="!authService.isAuthenticated()">
    <a mat-button routerLink="/login">
        Log In
    </a>
</span>

我的路线也有一个身份验证守卫：

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

这一切都很好，除非令牌变得无效，然后当前页面不会路由到login。

例如，如果我登录，获得一个有效的 JWT 令牌，我可以导航到一个受保护的页面，并出现受保护的 UI 元素（导航等）。如果我随后通过 chrome 开发工具从本地存储中删除 JWT 令牌，然后单击导航，受保护的 UI 元素按预期消失，但受保护的页面仍然存在，不会调用路由身份验证保护，并且仅路由到 login导航到其他页面时。

我尝试在isAuthenticated() authService 方法中进行路由，但这会导致无限循环。如何在调用 AuthGuard 之外自动路由到 login？

编辑

路由：

const routes: Routes = [
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  {
    path: 'products',
    component: ProductsComponent,
    canActivate: [AuthGuard],
    children: [
      { path: ':id', component: ProductComponent, canActivate: [AuthGuard] },
    ],
  },
  {
    path: 'search',
    component: SearchComponent,
    canActivate: [AuthGuard],
  },
  { path: 'login', component: LoginComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

编辑：我意识到这是预期的行为，因为 @GangadharJannu mentions，路由器不知道 UI 元素调用了 isAuthenticated() 方法，现在被隐藏了正在返回false，直到调用 AuthService 刷新方法并执行相同的检查。我很想知道当 UI 元素调用 isAuthenticated() 方法时让路由器知道导航到 login 的最佳方法？

编辑：我的工作解决方案：

 import { map } from 'rxjs/operators';
 import { interval } from 'rxjs';
 import { JwtHelperService } from '@auth0/angular-jwt';

 ...

 public validateToken(): void {
    interval(1000).pipe(
      map(() => {
        const isExpired: boolean = this.jwtHelper.isTokenExpired(
          localStorage.getItem('jwt_token'),
        );
        if (isExpired) {
          this.logout();
        }
      }),
    );
  }

Answer 1

我们有父级空状态只是为了保护我们应用程序的受保护部分，您可能想尝试一下。尝试类似这样的路由配置：

const routes: Routes = [{ 
    path: '', 
    canActivateChild: [AuthGuard], 
    runGuardsAndResolvers: 'always',
    children: [{
        path: 'products',
        component: ProductsComponent,
        children: [
          { path: ':id', component: ProductComponent },
        ],
      }, {
        path: 'search',
        component: SearchComponent
    }]
  },
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
];

注意runGuardsAndResolvers: 'always' - 它告诉 Angular 始终运行守卫和解析器，即使在导航到相同状态时也是如此。

编辑

所以基本上你想观察本地存储并对变化做出反应，所以当令牌从存储中删除或过期时，你想立即导航到登录组件。一些想法：

• 您可以将过期检查的频率提高到 1 秒，这不会造成太大影响，因为目前您正在检查令牌是否在每个渲染周期都过期
• 您可以在每次刷新令牌时设置一个定时可观察对象，以便它在过期后一秒触发并导航到登录
• 要观察本地存储本身的变化，您可以搜索一些具有此功能的库 (like this one) 或直接使用 native storage change event
• 如果您不关心用户手动删除令牌时的用例，那么您可以在您的应用从本地存储中删除令牌时导航到登录 (question/answers)