Question

我正在开发angular5 / firebase / ngrx项目，我在注册时遇到问题。

如果我使用我知道已经在系统中的电子邮件提交注册表单，我的控制台中会出现以下错误： POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=AIzaSyB_MH0xkLudBoy2QwVn6jfaFTUjJUylYHs 400（）

我的效果捕获以下错误“邮件地址已被其他帐户使用。”并发送signupErrorAction()

但是如果我立即重新提交表单，请求就不会发送到任何地方。呼叫永远不会到达我的效果文件或我的身份验证服务。我必须刷新页面以重新开始工作。

据我所知，缩小它是400 POST错误导致问题。我会发布一些代码，我可以使用任何人可能提出的任何建议。如果您需要更多信息，请告诉我们

MY-AUTH-服务

public registerWithEmail(payload: any): Promise<any> {
    console.log('signup called');
    return this.afAuth.auth.createUserWithEmailAndPassword(payload.email, 
      payload.password);
}

我的效果

/**
* Register with email and passowrd.
*/
@Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .map((action: actions.SignUpAction) => action.payload)
    .do(console.log)
    .switchMap(payload => this.authService.registerWithEmail(payload))
    .do(console.log)
    .map(data => new actions.SignUpSuccessAction({ user: data.user }))
    .do(console.log)
    .catch(error => Observable.of(new actions.SignUpErrorAction({ error: error })));

MY-注册-方法

public register() {

    console.log('register');

    const payload = {
      email: this.email,
      password: this.password,
      displayName: this.name
    }

    // dispatch AuthenticationAction and pass in payload
    this.store.dispatch(new SignUpAction(payload));
}

更新：我试过这个并遇到各种错误

    @Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .pipe(
    map((action: actions.SignUpAction) => action.payload),
    switchMap(payload => this.authService.registerWithEmail(payload)
        .pipe(
        map(data => new actions.SignUpSuccessAction({ user: data.user })),
        catch(error => Observable.of(new actions.SignUpErrorAction({ error: error })))
        )
    );

我得到的第一个错误：map（（action：actions.SignUpAction）=＆gt; action.payload），

'void'类型的'this'上下文不能分配给'Observable'类型的方法'this'。

这些是我对效果文件的rxjs导入

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
import "rxjs/add/operator/debounceTime";
import 'rxjs/add/observable/fromPromise'; 
import 'rxjs/add/observable/of';

由于 PK

Answer 1

您需要在catchError内执行catch（或switchMap），以便在出现错误时不会取消外部Observable。

@Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .map((action: actions.SignUpAction) => action.payload)
    .switchMap(payload => this.authService.registerWithEmail(payload)
      .map(data => new actions.SignUpSuccessAction({ user: data.user }))
      .catch(error => Observable.of(new actions.SignUpErrorAction({ error: error }))
    )
);

我还更新了您的示例以使用pipeable operators。

@Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .pipe(
      map((action: actions.SignUpAction) => action.payload),
      switchMap(payload => this.authService.registerWithEmail(payload)
        .pipe(
          map(data => new actions.SignUpSuccessAction({ user: data.user })),
          catchError(error => Observable.of(new actions.SignUpErrorAction({ error: error })))
        )
      )
    );

为此，您需要添加新的导入：

import { map, switchMap, catchError } from 'rxjs/operators';

使用ngrx效果捕获Firebase Auth错误

1 个答案: