angular - 使用 rxJs 订阅()到 Angular 2 中 2 个不同组件中的相同流

Question

我正在尝试在 Ionic 2 网络应用程序中设置登录，并且我正在使用可观察对象。

我有一个带有登录方法的授权模块，它连接到远程数据库来记录用户；如果登录成功，我想将 token (auth0) 存储在本地存储中

所以这是在我的 auth.service.ts 中

login(user: any) {
    this.http
      .get(SERVER_URL, { user_data }, options)
      .map((response: Response) => response.json())
      .subscribe(
        data => this.authSuccess(data.jwt),
        err => this.handleError(err));
  }

因此，它本身运行良好。现在我想使用登录屏幕，所以当用户提交数据时，如果登录成功，应用程序将导航到主屏幕，否则将显示错误消息。

登录组件应该是这样的

loginUser(event) {
    return this.authService
      .login(event.user)
      .subscribe(
        data => navigate_to_main,
        err => display_error_and_stay_in_login);
  }

因此，我需要在服务中的登录方法中进行订阅，因为我只想在登录成功时存储 token ，但我还需要在 LoginComponent 中的 loginUser 方法中进行订阅，以便仅在登录成功时进行导航成功。

这是怎么做到的？也许我没有以正确的方式这样做。

有人可以帮忙吗？谢谢!

Answer 1

auth.service.ts 可以返回 observable，允许登录组件进行订阅:

login(user: any) {
    return this.http
      .get(SERVER_URL, { user_data }, options)
      .map((response: Response) => response.json())
      .do(
        data => this.authSuccess(data.jwt),
        err => this.handleError(err));
  }

如果您需要从多个地方调用登录，您可以使用 .cache 避免重复请求:

private _login$;

loginOnce(user: any) {
    if (!this._login) {
        this._login = this.loginUser(user).cache();
    }
    return this._login;
}

来自组件的用法:

this.authService.login(user).subscribe(response => ...)