Angular Guard 和 JWT

Question

我正在尝试执行下一步...我有一个 API，我通过 POST 发送 JWT 令牌以验证它是否为 valid/expired、

所以在我的 angular 登录服务中，我有一个这样的方法。

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

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

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

所以我在 canActivate 中做了类似的事情。

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

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

但这是 returning 无效...为什么？我如何从该订阅中检索真值或假值？

Answer 1

不要 return 从路由内部订阅守卫，如果不是布尔值，则 return 布尔值的 Observable。

return this.loginService.isUserlogged()

因为 "isUserlogged" 已经在这里给你一个布尔值输出，你可以直接 return Observable。

如果 isUserlogged() 不是 return 布尔值，则通过管道传递它。

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

如果您的 API 通话结束并且 return 得到正确响应，这一切都将有效。如果您的 API return 无效，则说明您没有提供有关 API 通话和 API 作品的任何详细信息。（首先使用 HTTP 客户端测试您的 API，例如：Postman，如果给出了正确的响应，则将其与 Angular 集成）

Answer 2

我的解决方案，Promise Method 和一个健康的运行守卫。


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

Angular Guard and JWT

angular

angular-guards