【问题标题】:How to chain two observables in angular2, when value of 1st observable need in 2nd one当第一个可观察值的值需要在第二个中时,如何在 angular2 中链接两个可观察值
【发布时间】:2017-11-23 10:30:16
【问题描述】:

我想在 Angular 中链接两个 observable,其中第一个 observable 的输出需要在第二个 observable 函数中作为参数。

我创建了一个这样的可观察对象:

storeData(response: any): Observable<any> {
  return Observable.create((observer) => {
    // storing the data in localstorage
    this.storage.ready().then(() => {
      this.storage.set('USERACCESSTOKEN', response.token).then(() => {
        this.storage.set('USERROLE', response.user_role).then(() => {
          delete response.token;
          this.storage.set('USERDATA', response).then(() => {
            this.setLoggedIn(true);
            observer.complete();
          })
        })
      })
    })
  });
}

我想在我的登录页面中这样使用:

login(form: any, event: Event): void {
  this.authService.otpVerify(form)
    .switchMap((data) => this.authService.storeData(data))
    .subscribe(response => {
        if(this.navCntrl.canGoBack())
          this.navCntrl.pop();
        else
          this.navCntrl.setRoot('TabsPage');
    }, (err)=>{
           console.log("your credentials doesn't match");
    });
}

来自otpVerify,我会收到这样的回复:

{
   "success"   : true,
   "message"   : "Login success",
   "token"     : "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJod…n19fQ.EMMT6wJeoF7Y52c3UQzgw3rkTY0WduGYq...........",
   "name"      : "Jony",
   "user_role" : "editor"
}

这里在正确的凭据检查之后,我还想检查 user_role。如果 user_role 与响应中的(编辑者或订阅者)匹配,则只有它会转到 switchMap((data) =&gt; this.authService.storeData(data)) 块,否则它将显示 This role not allowed 对话框并且数据也不会被存储。 [我没有在这里添加这个逻辑,因为我不知道该怎么做。但这就是我要找的]。

AuthService 中的otpVerify 函数是这样的:

 otpVerify(body: any): Observable<any> {
   let headers = new Headers();
   headers.append('Content-Type', 'application/json');
   this.options = new RequestOptions({ headers: headers });
   return this.http.post(AppSettings.API_ENDPOINT2 + 'login', body, this.options)
     .map(response => response.json())
     .catch(this._errorHandler);
 }

在这个 otp 验证之后,我还想输入条件来查看它是否是有效用户。如果一切顺利,我将存储数据,否则显示一些错误消息。请帮我解决这个问题。

【问题讨论】:

  • 所以你想改变 login 方法来让事情正常工作,对吧?
  • 是的@AdrienBrunelat
  • 当前代码到底有什么问题?我没有设置我的角度环境,只能通过头部来帮助你。
  • 这里也存储数据,但问题是页面正在重定向,不知道为什么。我想在订阅块中编写一些逻辑,但我相信它正在将我从平面图返回语句重定向。
  • 好的,我很困惑,您能否编辑您的原始问题并澄清您在两种情况下(当身份验证失败和成功时)的确切行为,提及方法及其在使用中的作用案例。

标签: javascript angular typescript rxjs observable


【解决方案1】:

好的,根据我对您最近编辑的了解,这将为我们提供以下信息:

login(form: any, event: Event): void {
  this.authService.otpVerify(form)
    .switchMap(
      (data: any) => {
        if (data.user_role === "editor" || data.user_role === "subscriber") {
          return this.authService.storeData(data);
        } else {
          console.log("Insufficient privileges");
        }
      },
      (err) => console.log(err))
    .subscribe(() => {
      if (this.navCntrl.canGoBack()) {
        this.navCntrl.pop();
      } else {
        this.navCntrl.setRoot('TabsPage');
      }
    });
}

switchMap 中的代码检查角色并仅在权限足够时调用storeData

【讨论】:

  • 工作完美的先生,但不知道,为什么它不去订阅块。
  • 页面仅在之前重定向。
  • 你的意思是当你有一个角色为“editor”或“subscriber”的用户时,重定向失败?
  • 当一切正常时,意味着角色匹配,它会将我重定向到根页面。也许它是一个离子问题。不知道。
  • 是的,看起来这是来自navCntrl 部分,这是另一回事。
猜你喜欢
  • 2018-07-05
  • 1970-01-01
  • 2020-04-02
  • 1970-01-01
  • 2012-07-19
  • 2018-06-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多