Angular - 打字稿变量范围

Posted 2023-03-10

【中文标题】Angular - 打字稿变量范围

【英文标题】：Angular - Typescript variables scope

【发布时间】：2021-09-23 09:47:13

【问题描述】：

我在角度方面是全新的。我正在尝试创建一个 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!"

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

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

谢谢！

【问题讨论】：

你有什么问题？

为什么我的 isvalid 变量值变为 0 而我总是将其设置为 1 抱歉

该错误与范围无关，而是与异步有关，尤其是Observable 用法'。我建议阅读更多关于它的内容。

好的，谢谢！我会读！

【参考方案1】：

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

将 isValid 设置为零 将来某个时候验证 jwt，不知道什么时候。 如果执行了验证，则返回 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;
      ));
    
  

【讨论】：

我复制了这段代码并显示在 isValidateJwt：“声明类型既不是 'void' 也不是 'any' 的函数必须返回一个值。”并且也有一个错误：“类型'Observable'上不存在属性'map'”

后端 isValid 响应是一个整数而不是布尔值 1 如果 jwt 有效 0 是 jwt 无效。

你需要从 rxjs/operators 和 javascript 中导入地图 0 == false

错误：src/app/services/login.service.ts:63:21 - 错误 TS2355：声明类型既不是“void”也不是“any”的函数必须返回一个值。 63 isValidateJwt() : Observable

错误：src/app/services/login.service.ts:64:123 - 错误 TS2339：“Observable