Question

我正试图做下一个...我有一个API，我在其中通过POST发送JWT令牌，以验证它是否有效/过期

所以在我的角度登录服务中，我有这样的方法。

isUserlogged() {
  return this.httpClient.get(`${this.URL}/verifyToken`, { headers: { 'authorization': localStorage.getItem('token') } })   
}

此订阅返回一个布尔值，在这里一切正常。

现在我正在我的应用程序中实现Guards，所以现在我想对我的canActivate方法使用该布尔值来阻止访问...我读到我需要在此方法中返回true或false才能允许或阻止访问我之前配置的路由

所以我正在canActivate内做类似的事情。

this.loginService.isUserlogged().subscribe((response: boolean)=>{  

if(response){
   return true;
}
   return false;
});

但是这返回了空...为什么？我该如何从此订阅中获取true或false值？

Answer 1

不要从警卫队内部的路由中返回订阅，如果不是布尔值，则返回一个Observable布尔值。

return this.loginService.isUserlogged()

由于“ isUserlogged”已经在此处提供了布尔输出，因此您可以直接返回Observable。

如果isUserlogged()不返回布尔值，则将其用管道传递。

return this.loginService.isUserlogged().pipe(
    map((resp) => {
        // some logic here, check the return.
        // based on the logic
        if (something) {
            return true
        }
        return false
    })
)

如果您的API通话结束并返回正确的响应，则所有操作都将起作用。如果您的API返回的无效，则您尚未提供有关API调用的任何详细信息，并且您的API可以使用。（首先使用HTTP客户端（例如：邮递员）测试您的API，如果给出正确的响应，则将其与Angular集成）

Answer 2

我的解决方案，诺言方法和健康的后卫。


canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return this.mailVerifyControl()
      .then(() => {
        return true;
      })
      .catch((err) => {
        return false;
      });
  }


  mailVerifyControl(): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (this.authService.isMailVerified === true) {
        reject()
      }
      resolve();
    });
  }

Angular Guard和JWT

2 个答案: