将可观察对象放入角度条件

Question

我正在尝试基于我的 api 创建一个日志系统， 我创建了 3 个函数： me() ：返回带有令牌的用户配置文件 isloggedin() 返回一个 boolean observable，基于：有 me() 请求 data.success（已经被 api 接受的令牌） 最后，我将它用在我的角度防护中；

我有：

    console.log("triggered");
    if(localStorage.getItem('token') && localStorage.getItem('logged') == "True"){
      let meOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
          'Authorization': localStorage.getItem('token'),
        })
      };
    return this.http.get<user>('https://localhost:3000/user/me', meOptions);
  }else{
    return of(new user(false, "",""));
  }

  }
isloggedin():Observable<boolean>{
  return this.me().pipe(map(data=>{ //pipe sur undefined 
    console.log(data);
    if(data.success){
      console.log("renvoie oui")
      return true; 
    }else{
      console.log("renvoie non")
      return false;
    }
  }))
}

我验证了：

   this.auth.isloggedin().subscribe((data)=>{
      console.log(data);
    })

• 返回真或假 但是，当涉及到 observable 时：

    if(this.auth.isloggedin()){
      console.log("You logged - guard")
      return true;

    }else{
      console.log("Kick by guard ! Not logged - guard")
      this.router.navigate(["auth"]);
      return false;
    }
  }```
Everytime, the guard returns "logged", even when the isloggedin() tells that the user isn't loggedin,
what am I doing wrong ? How to correct it ?
Thanks

Answer 1

你将你的 observable 返回给守卫，让他们处理订阅...

return this.auth.isLoggedIn().pipe(
  tap(loggedIn => {
    if (!loggedIn) {
      this.router.navigate(['auth']);
    }
  })
)

Answer 2

不是什么大事，你的 if 语句是在访问 observable，而不是值。只需将 if 替换为 that：

if(this.auth.isloggedin().value){
  console.log("You logged - guard")
  return true;

}

编辑 1：

对不起，我正在使用该答案期望一个主题，而不是一个可观察的。在这种情况下，您必须真正订阅。

编辑2：

在这种情况下，您可以只订阅该 Observable 并将其值分配给您的类中的一个属性，然后使用该属性而不是该 observable 进行 if 语句，例如：

bool

ngOnInit() {
    subscription =  this.auth.isloggedin().subscribe((data)=>{
      this.bool = data;
    });
}

method() {
    if(this.bool) {
    your code...
    } else {
    your code...
    }
}

编辑 3：

别忘了退订

编辑 4：

抱歉，我没有意识到这是一个 http 请求。但概念是一样的，每次要检查用户是否登录时，都需要更新 bool（订阅 isLoggedIn）。所以...我认为可以：

bool: boolean;

constructor() {}

ngOnInit() {
    this.checkUserIsLogged();
}

method() {
    if(this.bool) {
    your code...
    } else {
    your code...
    }
}

checkUserIsLogged(callback?){
    this.auth.isloggedin().subscribe((data)=>{
      this.bool = data;
    }, err => {}, () => {
        if (callback) {
            callback();
        }
    });
}

facadeMethod() {
    this.checkUserIsLogged(() => {
        this.method();     
  })
}