Question

首先，我想返回操作令牌，此后，我要发出一个http调用，在此我调度另一个操作。我不知道该如何退还两件事。

@Effect()
  login$ = this.actions$.pipe(
    ofType(AuthActionTypes.LOGIN),
    map(userData => userData.payload),
    exhaustMap((user: any) => {
      return this.userService.login(user.username, user.password)
        .pipe(
            map((res: any) => {
              console.log('authorization' + res.headers.get('Authorization'));
              return new Token({
                token: {
                  token: res.headers.get('Authorization')
                }
              }),
              return this.http
                .get(`${this.restServiceRoot}${this.currentUserRestPath}`)
                .pipe(
                  map((response: any) => {
                    return new LoginSuccess({
                      user: {
                        user: response.name,
                        role: response.role,
                      }
                    });
                  }),
                );
            })
            );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

Answer 1

有两种解决方法- 1。

@Effect
login$ = this.actions$.pipe(
    ofType(AuthActionTypes.LOGIN),
    map(userData => userData.payload),
    exhaustMap((user: any) => {
      return this.userService.login(user.username, user.password)
        .pipe(
            mergeMap((res: any) => {
              console.log('authorization' + res.headers.get('Authorization'));
              this.store.dispatch(new Token({
                token: {
                  token: res.headers.get('Authorization')
                }
              }));              
              return this.http
                .get(`${this.restServiceRoot}${this.currentUserRestPath}`)
                .pipe(
                  map((response: any) => {
                    return new LoginSuccess({
                      user: {
                        user: response.name,
                        role: response.role,
                      }
                    });
                  }),
                );
            })
            );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

或在登录操作中，您返回令牌操作以更新商店中的令牌，并返回另一个操作以从“ $ {this.restServiceRoot} $ {this.currentUserRestPath}”中获取资源。在第二个操作的效果下，请使用“ $ {this.restServiceRoot} $ {this.currentUserRestPath}”调用您的http [将以下代码视为伪代码-请注意-由于某些原因，代码格式无法正常工作，因此请将代码复制粘贴到您的编辑器]-

@Effect()
login$ = this.actions$.pipe(
ofType(AuthActionTypes.LOGIN),
    map(userData => userData.payload),
    exhaustMap((user: any) => {
      return this.userService.login(user.username, user.password)
        .pipe(
            mergeMap((res: any) => {
              console.log('authorization' + res.headers.get('Authorization'));
              return [new Token({
                token: {
                  token: res.headers.get('Authorization')
                }
              }), new GetCurrentUserRestPath()]
              )         
            );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

@Effect()
  login$ = this.actions$.pipe(
    ofType(AuthActionTypes.GET_CURRENT_USER_REST_PATH),    
    switchMap((user: any) => {
      return this.http
      .get(`${this.restServiceRoot}${this.currentUserRestPath}`)
      .pipe(
        map((response: any) => {
          return new LoginSuccess({
            user: {
              user: response.name,
              role: response.role,
            }
          });
        }),
      );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

Ho，这将为您提供解决问题的方法。

在Angular NgRx效果中进行http调用之前，如何调度动作？

1 个答案: