身份验证服务 Angular 2 with Rxjs

Question

我有一个登录表单组件，它具有以下内容：

login.component.ts

ngOnInit() {
this.authenticationService.loginAttempt
.subscribe(() => this.onSuccess(), err => this.onError(err));
}
login(credentials) {
this.authenticationService.attempt(credentials);
}

我的身份验证服务当前如下所示：

authentication.service.ts

class AuthenticationService {
loginAttempt = new Observable<>();
credentials = new Subject<Credentials>();
constructor(private userService: UserService) {
this.loginAttempt = this.credentials
.flatMap(credentials => this.makeLoginRequest(credentials);
}
attempt(credentials: Credentials) {
this.credentials.next(credentials);
}
private makeLoginRequest(credentials) {
return this.userService.getTokens(credentials.email, credentials.password);
}
}

我面临的问题是，如果登录尝试失败，我能够触发login.component上的onError功能以显示错误消息，但随后的登录尝试不再触发登录请求，因为loginAttempt有错误。

如何在login.component中捕获错误，以便显示错误，同时仍允许后续重试？

编辑：

这个问题建议使用retry或retryWhen，但我不确定如何根据用户再次单击登录按钮的时间合并它。我该怎么做(如果这是正确的方法(？

Answer 1

你要做的是把它加载到ngOnit上，以便在页面加载时加载它。

之后，您将再也不会重新加载它。因此，成功保持成功，错误保持错误。

将服务呼叫放在按钮调用后面，您就完成了。

编辑

改变：

ngOnInit() {
this.authenticationService.loginAttempt
.subscribe(() => this.onSuccess(), err => this.onError(err));
}

到：

buttonClicked() {
this.authenticationService.loginAttempt
.subscribe(() => 
this.onSuccess(), 
err => this.onError(err)
);
}