1

我正在尝试添加一个 Route Guard，它将向 PHP API 发送 JWT，该 API 将根据用户是否经过身份验证返回 true 或 false。通过我的测试，Route Guard 一直有效，直到它真正调用 API。如果 API 返回 false，则守卫按预期工作。但是，如果 API 返回 true，那么守卫似乎想要重定向用户，就好像它返回 false 一样，但它没有显示主屏幕，而是只显示空。

auth.guard.ts

canActivate(): boolean {
    if (localStorage.getItem('portfolioJWT') === null) {
        this.router.navigate(['/']);
        return false;
    } else {
        const token = JSON.parse(localStorage.getItem('portfolioJWT'));

        this.authService.isAuth(token).subscribe(res => {
            console.log(res);
            if(!res) {
                this.router.navigate(['/']);
                console.log("NOT Authorized");
                return false;
            } else {
                console.log("Authorized");
                return true;
            }
        });
    }
}

auth.service.ts

isAuth(token: string): Observable<Boolean> {

  const authHttpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'Bearer ' + token
      })
  };

  return this.http.post<Boolean>('http://portfolioapi/api/checkAuth', {}, authHttpOptions);
}

我让守卫控制台记录返回的值，以及用户是否被授权，它会显示正确的数据。

4

1 回答 1

2

问题可能是您没有Promise<boolean>为 canActivate 使用 a，因此当 canActivate 仍在后台执行时，路由器已经移动，从而触发了意外行为。

一个示例可能是 API 返回false并初始化 a navigate，但仅在路由器已经将您导航到某个地方之后（这可能会触发空白页面）。对于console.log(res). 它可能有效，但为时已晚，路由器已继续前进。

您想要实现的是路由应该暂停，直到收到 true 或 false。在没有 Promise 的情况下检查局部变量的值可能会正常工作，但在执行 API 调用时确实很重要，因为它是异步的，因此您明确需要告诉路由器等待调用完成。

canActivate(): Promise<boolean> {
    return new Promise((resolve) => {
        if (localStorage.getItem('portfolioJWT') === null) {
            this.router.navigate(['/']);
            resolve(false);
        } else {
            const token = JSON.parse(localStorage.getItem('portfolioJWT'));

            this.authService.isAuth(token).subscribe(res => {
                console.log(res);
                if(!res) {
                    this.router.navigate(['/']);
                    console.log("NOT Authorized");
                    resolve(false)
                } else {
                    console.log("Authorized");
                    resolve(true)
                }
            });
        }
    })
}
于 2018-08-15T15:19:21.147 回答