时间戳

首页 > 解决方案 > 在 Angular 6 应用程序中实现了 Auth 保护。实施不起作用。

angular - 在 Angular 6 应用程序中实现了 Auth 保护。实施不起作用。

问题描述

在 Angular 6 应用程序中实现了 Auth 保护。实施不起作用。

认证卫士

export class AuthGuard implements CanActivate {
      constructor(public manageAccountService: ManageAccountService, public myRoute: Router) {}
      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean {
        this.manageAccountService.getAccounts().subscribe(
          (res) => {
            if (res.d.Status == 0) {
                this.myRoute.navigate([next.url[0].path.toString()]);
              return true;
            }
            else {
              window.location.href = environment.LOGIN_URL;
            }
          }
        );

      return false;
      }
    }

预期结果 重定向到 next.url

实际结果manageAccountService.getAccounts()多次 卡在循环发送请求中

标签： angularangular6auth-guard

解决方案

发生这种情况是因为在每个生命周期步骤都运行了守卫。而且有很多。

看它好像警卫被跑了

  • ngOnInit
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

（好像，因为它在每个导航事件中运行，而且还有很多，而且它并没有对所有人说话）

而且您没有将订阅分配给任何变量，这意味着它会在每次调用时进行订阅。

最后，激活守卫的签名是

boolean | Observable<boolean> | Promise<boolean>

在您的情况下，您不会返回任何内容（如果您不明白为什么，请查看 RxJS 文档）。

你不应该对守卫进行 HTTP 调用，但如果你想这样做，下面是语法：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable < boolean > {
  if (this['get_accounts_called']) { return false; }
  this['get_accounts_called'] = return this.manageAccountService.getAccounts()
    .pipe(map(res => res.d.Status == 0))
}

推荐阅读