Question

我尝试在Ionic 2网络应用程序中设置登录，并且我使用了observables。

我有一个带登录方法的auth模块，它连接到远程数据库以记录用户;如果登录成功，我想将令牌（auth0）存储在localstorage

中

所以这是我的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);
  }

所以，我需要订阅服务中的login方法，因为我只想在登录成功时存储令牌，但我还需要在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 => ...)

Answer 2

您可以通过在auth.service.ts：

中进行以下更改来执行相同的操作

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

Answer 3

仅在您要使用数据时订阅。您可以使用catch处理服务错误。

您必须导入import 'rxjs/add/operator/catch';

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

使用rxJs

3 个答案: