在 canActivate 中进行延迟，直到获取 IP 地址数据

Question

I'm making a guard for my angular application where all users should be redirected to maintenance page except for certain IPs. I'm getting the client IP address using third party APIs like http://api.ipify.org/?format=json . The PROBLEM I'm facing is that the canActivate guard gets executed before the IP API sends in the response, thus always returning false and then the response gets loaded.

canActivate Function

  canActivate(): boolean | Observable<boolean> {
    if (this.globalService.getCanactivateStatus()) {
      return true;
    } else {
      this._router.navigate(["/en/maintainance"]);
      return false;
    }
  }

Service

  getUserIp() {
    this.http.get<{ ip: string }>("http://api.ipify.org/?format=json").subscribe((data) => {
      this.clientIP = data.ip;
    });
  }

  getCanactivateStatus() {
    this.getUserIp()
      if (this.maintainance_status) {
        if (this.IpArray.indexOf(this.clientIP) !== -1) { //this.clientIP waits for response while canactivated gets executed
          return true
         }
      } else return true 
  }

Answer 1

You can try returning an observable instead of true / false and filter it so it will fire if conditions are met like:

return this.globalService.getCanactivateStatus()
        .pipe(
          filter((status) => !!status),
          take(1)
        )

You should implement the return logic at getCanactivateStatus() to get this work