基于Ngrx Effect实现S3上传+用户注册的方案合理性咨询

我想实现用户点击一次按钮，同时完成图片上传至S3（用随机UUID命名）和用户注册的功能，流程是先上传图片到S3，再用返回的UUID和签名URL在DynamoDB创建用户（UUID作为用户ID，图片字段存S3地址）。

目前我用Ngrx Effect实现了这个逻辑，但遇到一个问题：因为只触发AuthActions.upload这一个Action，不得不把密码、邮箱等用户信息传给仅处理S3上传的Nest控制器。我不确定这种做法是不是不良实践，正在学习RxJS和Ngrx，想了解当前实现的合理性。

以下是我的相关代码：

整合上传与注册的Effect： #

export const uploadEffect = createEffect(
  (action$ = inject(Actions), authService = inject(AuthService)) => {
    return action$.pipe(
      ofType(AuthActions.upload),
      concatMap(({ uploadRequest }) => {
        return authService.uploadImage(uploadRequest).pipe(
          map((uploadSuccess) => {
            return AuthActions.uploadSuccess({ "uploadSuccess" });
          }),
          catchError((error: ServerError) => {
            return of(AuthActions.uploadFailure({ "error" }));
          })
        );
      }),
      switchMap((action) => {
        if (action.type === '[Auth API] Upload Success') {
          return authService
            .registerUser({
              "user": {
                ...action.uploadSuccess,
                "image": action.uploadSuccess.url,
              },
            })
            .pipe(
              map((response: RegisterResponseInterface) => {
                return AuthActions.registerSuccess({
                  "message": response.message,
                });
              }),
              catchError((error: ServerError) => {
                return of(
                  AuthActions.registerFailure({
                    "error",
                  })
                );
              })
            );
        } else if (action.type === '[Auth API] Upload Failure') {
          return of(
            AuthActions.registerFailure({
              "error": {
                "message": 'failed to upload and register',
              },
            })
          );
        } else {
          return EMPTY;
        }
      })
    );
  },
  {
    "functional": true,
  }
);

单独的注册Effect： #

export const registerEffect = createEffect(
  (action$ = inject(Actions), authService = inject(AuthService)) => {
    return action$.pipe(
      ofType(AuthActions.register),
      switchMap(({ request }) => {
        return authService.registerUser(request).pipe(
          map((response: RegisterResponseInterface) => {
            return AuthActions.registerSuccess({ "message": response.message });
          }),
          catchError((error: ServerError) => {
            return of(
              AuthActions.registerFailure({
                "error",
              })
            );
          })
        );
      })
    );
  },
  { "functional": true }
);

未整合注册的上传Effect： #

export const uploadEffect = createEffect(
  (action$ = inject(Actions), authService = inject(AuthService)) => {
    return action$.pipe(
      ofType(AuthActions.upload),
      switchMap(({ uploadRequest }) => {
        return authService.uploadImage(uploadRequest).pipe(
          map((uploadSuccess) => {
            return AuthActions.uploadSuccess({ "uploadSuccess" });
          }),
          catchError((error: ServerError) => {
            return of(AuthActions.uploadFailure({ "error" }));
          })
        );
      })
    );
  },
  {
    "functional": true,
  }
);

当前实现的问题 #

把密码、邮箱等用户敏感信息传给仅处理S3上传的接口，确实属于不良实践，理由如下：

• 违反单一职责原则：S3上传接口只应处理文件上传逻辑，不该接收和处理用户身份信息，接口职责混乱会大幅增加维护成本。
• 安全风险：敏感数据经过不必要的服务节点传输，扩大了数据泄露的风险，即使加密传输，也没必要让无关接口接触到这些信息。
• 耦合性高：上传逻辑和注册逻辑绑定过紧，后续如果要单独复用上传功能（比如修改用户头像），会因为接口依赖用户信息而无法直接使用。

优化方案 #

核心思路是：前端保留用户注册信息，先发起纯文件上传请求，拿到S3返回的UUID和URL后，再携带用户信息+S3数据发起注册请求，无需修改后端接口职责，同时符合Ngrx的最佳实践。

1. 调整Action设计

新增一个专门的AuthActions.registerWithImage Action，携带完整的用户注册信息（邮箱、密码）和图片文件：

// 示例Action定义
export const registerWithImage = createAction(
  '[Auth] Register With Image',
  props<{ user: { email: string; password: string }, file: File }>()
);

2. 重构Effect逻辑

基于新Action编写整合流程的Effect，把用户信息留在前端，只传文件给S3上传接口：

export const registerWithImageEffect = createEffect(
  (action$ = inject(Actions), authService = inject(AuthService)) => {
    return action$.pipe(
      ofType(AuthActions.registerWithImage),
      concatMap(({ user, file }) => {
        // 仅传文件给S3上传接口，不带用户信息
        return authService.uploadImage({ file }).pipe(
          // 保留用户信息，和上传结果合并
          map((uploadSuccess) => ({ user, uploadSuccess })),
          catchError((error: ServerError) => {
            return of(AuthActions.registerFailure({ error }));
          })
        );
      }),
      switchMap(({ user, uploadSuccess }) => {
        // 携带用户信息+S3返回的UUID/URL发起注册请求
        return authService.registerUser({
          user: {
            ...user,
            id: uploadSuccess.uuid,
            image: uploadSuccess.url
          }
        }).pipe(
          map((response: RegisterResponseInterface) => {
            return AuthActions.registerSuccess({ message: response.message });
          }),
          catchError((error: ServerError) => {
            return of(AuthActions.registerFailure({ error }));
          })
        );
      })
    );
  },
  { functional: true }
);

3. 保留原有独立Effect

之前的uploadEffect和registerEffect可以保留，用于单独的上传或注册场景，保证功能的复用性。

合理性说明 #

优化后的实现符合Ngrx和RxJS的设计理念：

• 单一职责：每个接口只处理自己的核心逻辑，Action和Effect也各司其职。
• 数据流清晰：从触发注册+上传的Action开始，依次完成上传、注册，每一步的数据流可追踪。
• 降低耦合：上传和注册逻辑解耦，既可以组合使用，也可以单独复用。

内容的提问来源于stack exchange，提问作者Mathew