Angular - 打字稿变量范围

Question

我在角度方面是全新的。我正在尝试创建一个 auth-guard，它将一个 post 请求发送到后端，并验证 JWT。如果JWT 是有效的防护应该允许访问所请求的组件。这就是我的auth.guard.ts 的样子：

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    if (this.loginService.isLoggedIn() && this.loginService.isValidateJwt() == 1) {
      console.log("AuthGuard return to requestet page!")
      return true;

    }
    else {

      console.log("AuthGuard redirect to login page!")
      this.router.navigate(['login']);

      return false;
    }

  }

loginService 相关部分如下所示：

  isLoggedIn(){

    let token=localStorage.getItem("jwt");
    let username=localStorage.getItem("username");

    if(token==undefined || token=='' || token==null || username==undefined || username == '' || username==null){
      console.log("LoginService isLoggedIn token and username NOT FOUND in local storage!");
      return false;

    }
    else {
      console.log("LoginService isLoggedIn token and username FOUND in local storage! Stat validate JWT!");
      return true;

    }
  }

  isValidateJwt() : number {

    console.log("isValidateJwt invoked!")
    var isvalid = 0

    this.http.post(this.validate_url, new ValidateRequest(localStorage.getItem("jwt") , localStorage.getItem("username"))).subscribe(

        (response:any)=>{
          // success
          console.log("isValidateJwt isValid: " + response.isValid);
          isvalid = response.isValid;

        },
        error=>{
          // error
          console.error(error);
          //window.location.href="/dashboard"

        }
    )
    console.log("isValidateJwt returning: " + isvalid)
    return isvalid;

  }

这是我的后端响应的样子：

{
  "isValid": 1,
  "message": "JWT is VALID!"
}

1. 我在登录过程中在本地存储中创建了两个项目（用户名/jwt）
2. 当用户想要访问受保护的组件时，守卫会调用isLoggidIn 和isValidateJwt 函数。
3. isLoggedin 函数读取 localStorage，如果用户名和 jwt 存在，则返回 true
4. isValidateJwt 函数调用后端并验证 jwt
5. 如果JWT有效，后端在响应对象中返回isValid = 0，我将其存储到isValidateJwt函数内部的isValid变量中，但是当函数最终返回isValid变量的值时将再次为 0。
6. 我设置了后端它总是返回 isValid = 0

我认为这与变量范围有关，但我不明白为什么我的 isValid 变量设置回零。

谢谢！

Answer 1

因此，您的isValidateJwt 方法如下所示：

1. 将 isValid 设置为零
2. 将来某个时候验证 jwt，不知道什么时候。
3. 如果执行了验证，则返回 isValid。

所以你的 isValidateJwt 应该返回一个 observable 或一个 promise

 isValidateJwt() : Observable<boolean> {
   return this.http.post(this.validate_url, new ValidateRequest(localStorage.getItem("jwt"), localStorage.getItem("username")))
    .pipe(map(
       (response:any) =>{
          // success
          console.log("isValidateJwt isValid: " + response.isValid);
          return response.isValid;
        }));
  }

然后你还需要从你的 guard 方法中返回一个 observable：

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | boolean {
    
    if (!this.loginService.isLoggedIn()){
       this.router.navigate(['login']);
       return false;
    }
    return this.loginService.isValidateJwt().pipe(map((result) => {                               
           if (!result) this.router.navigate(['login']);
           return result;
      }));
    }
  }