api响应在调用canActivate方法后到达

Question

我是角落里的小伙子。我编写了一个保护服务，以便只有授权（登录）的用户才能访问特定的组件。我正在使用asp.net作为后端，我在服务器端使用api来返回授权状态，该方法是异步的。问题是有时api响应在调用canActivate方法之后到达，因此尽管用户被授权，该方法仍然返回false。

@Injectable()
export class AuthenticationGuardService implements CanActivate {
  isSignedIn: boolean = false;
  result: Object;
  constructor(private router: Router,private http: HttpClient, @Inject('BASE_URL') private url: string) {
    this.http.get(this.url + 'api/Authentication/UserInfo').subscribe(
      result => {
        if (result != null) {
          this.isSignedIn = true;
        }
      }
    )
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    if (!this.isSignedIn) {
      this.router.navigate(['sign-in']);
    }
    return this.isSignedIn;
  }
}

        public async Task<IActionResult> UserInfo()
        {
            var user = await userManager.GetUserAsync(HttpContext.User);
            if (user == null)
            {
                return null;
            }
            return Json(new
            {
                email = user.Email,
                name = user.FirstName,
                family = user.LastName
            });
        }

Answer 1

canActivate接受布尔值或布尔值的可观察值，避免订阅试试这个

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean>{

return this.http.get(this.url + 'api/Authentication/UserInfo').pipe(map(
  (result) => {
    if (result != null) {
       return true;
    } else {
        this.router.navigate(['sign-in']);
        return false;
     }
  }
 ));
}

Answer 2

可以从canActivate返回来自canActivate和Promise的调用授权api，其返回true或false。

Answer 3

这里的问题是API调用和isSignedIn变量的评估之间存在竞争条件。我们可以解决这个问题。

如果你看看docs为CanActivate卫队，你会发现Observable<boolean>是可能的回归类型之一。因此，删除构造函数中的HTTP代码，将方法返回类型更改为Observable<boolean>，而不是像以前那样返回isSignedIn变量，请执行以下操作：

如果您的API调用直接返回布尔值：

return this.http.get(this.url + 'api/Authentication/UserInfo');

如果由于某种原因，您的API不直接返回布尔值：

return this.http
           .get(this.url + 'api/Authentication/UserInfo')
           .pipe(result => !!result);

通过返回Observable<boolean>，我们告诉Angular我们将在某个时刻返回一个布尔值，但我们只是不确切知道何时会发生这种情况。所以在这种情况下，它会等到它结束后再继续。