Tengo un AuthService con estos métodos:
signUp = (data: SignUp): Observable<AuthResponseData> => { const endpoint = `${env.authBaseUrl}:signUp?key=${env.firebaseKey}`; return this._signInOrSignUp(endpoint, data); }; signIn = (data: SignIn): Observable<AuthResponseData> => { const endpoint = `${env.authBaseUrl}:signInWithPassword?key=${env.firebaseKey}`; return this._signInOrSignUp(endpoint, data); }; private _signInOrSignUp = (endpoint: string, data: SignIn | SignUp): Observable<AuthResponseData> => { return this.http.post<AuthResponseData>(endpoint, { ...data, returnSecureToken: true }).pipe( catchError(error => this._throwError(error)), tap(response => this._createAndEmitUserSubject(response)), ); } private _throwError = error => { const errorMessage = error.error.error.message; return throwError(errorMessage); }; private _createAndEmitUserSubject = (response: AuthResponseData) => { const expirationDate = new Date(new Date().getTime() + +response.expiresIn * 1000); const user = new User( response.idToken, response.email, response.idToken, expirationDate ); localStorage.setItem("user", JSON.stringify(user)); this.user$.next(user); };Y en los componentes de inicio de sesión y registro, los llamo de la siguiente manera:
submit = (): void => { if (this.loginForm.invalid) { return; } this.authService .signIn(this.loginForm.value) .subscribe({ next: () => this.router.navigate(["/recipes"]), error: error => this.error = error }); }; Pero el código dentro de next no se ejecuta. Si .pipe() lo es. Esperaba no necesitar usar .pipe() en dos lugares.
Se parece a esto. this._throwError no arroja un error. Si lo fuera, next no podría ser llamado más tarde. Probablemente no esté throw un error y, en cambio, devolviendo algún valor que va al next
Eliminar this.user$.next(user) lo resuelve, y no me di cuenta de que no lo necesitaba en absoluto, pero me gustaría saber por qué bloqueó el flujo.
private _createAndEmitUserSubject = (response: AuthResponseData) => { // ... localStorage.setItem("user", JSON.stringify(user)); };