时间戳

首页 > 解决方案 > 登录时，Angular 6 auth guard 停留在空白页面上

angular - 登录时，Angular 6 auth guard 停留在空白页面上

问题描述

我找到了这个答案，我正在修改它以使用我的身份验证：Angular 6 AuthGuard

但是，当用户成功通过身份验证时，身份验证守卫只是转到空白页面而不是转发到 URL。请注意，当用户没有令牌时，它会按预期工作。它转发到登录页面。

我看到“有效令牌”行的控制台输出，但没有发生重定向。另外，如果我输入“return true;” 在处理程序的顶部，转发工作。

这是来自我的身份验证服务的有问题的代码块：

authenticationHandler(): boolean {
    if (this.myToken) {
      this._auth.validateToken(this.myToken)
        .subscribe((result) => {
          if (result.value) {
            // TODO
            console.log('AuthGuard: valid token');

            this.loggedIn.next(true);
            return true;
          } else {
            this.loggedIn.next(false);
            this._router.navigate(['/login']);
            return false;
          }

        });
    } else {
      this.loggedIn.next(false);
      this._router.navigate(['/login']);
      return false;
    }
  }

  canActivate(): boolean {
    return this.authenticationHandler();
  }

标签： angulartypescript

解决方案

您true在 subscribe 函数内部返回，该值不会进一步传递给路由保护。相反，路由守卫正在返回undefined，其评估结果为falsey。

您希望路由守卫在返回之前等待令牌验证。实现这一点的最简单方法是使用 async/await 语法。

async authenticationHandler(): Promise<boolean> {
  if (this.myToken) {
    const result = await this._auth.validateToken(this.myToken).toPromise();
    if (result.value) {
        // TODO
        console.log('AuthGuard: valid token');

        this.loggedIn.next(true);
        return true;
     } else {
        this.loggedIn.next(false);
        this._router.navigate(['/login']);
        return false;
     }

  } else {
    this.loggedIn.next(false);
    this._router.navigate(['/login']);
    return false;
  }
}

这样，您的代码将在退出路由保护之前获得验证结果。

推荐阅读