CODEWITHSUNDEEP
angulartypescriptrxjsobservablesubject
tam5
tam5

Reputation: 3237

Auth service Angular 2 with Rxjs

I have a login form component which has the following:

login.component.ts

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

login(credentials) {
    this.authenticationService.attempt(credentials);
}

My authentication service currently looks like this:

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);
    }
}

The problem I am facing is that if the login attempt fails, I am able to trigger the onError function on the login.component to display an error message, but then subsequent login attempts do not trigger the login request anymore, because the loginAttempt had an error.

How can I catch the error in the login.component so that I can display the error, while still allowing for subsequent retries?

Edit:

This question suggests to use retry or retryWhen, but I am not sure how to incorporate that based on when the user clicks the login button again. How can I do that (if that is the right approach)?

Upvotes: 0

Views: 414

Answers (1)

Swoox
Swoox

Reputation: 3740

What you do is you load it on ngOnit so you load it when the page load.

After that you never reload it again. So the succes stay a succes and the error stay a error.

Put the service call behind the button call and you done.

Edit

Change:

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

Into:

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

Upvotes: 2

Related Questions