rest - SPA - 基于服务器端验证的操作确认

Question

我正在寻找可重复使用的解决方案，以解决用户执行的某些操作在完成之前可能需要用户进一步确认的问题。
我正在使用 React 前端和 WebAPI 后端开发应用程序。
假设用户正在发起资金转账，并假设我们无法在发起转账之前检查他/她的账户客户端中的可用资金。当用户提交请求(通过 HTTP POST)时，如果用户的账户有足够的资金，请求应该正常完成；如果资金不足并且用户在 overdraw 限额内，那么应该提示用户使用 overdraw ，并且只有当用户确认使用 overdraw 请求应该完成。
另一种情况是，假设用户想要删除一个收款人帐户(通过 HTTP DELETE)。当收款人帐户没有定期付款设置时，删除应正常完成。当存在定期付款设置时，应进一步提示用户(检查定期帐户只能在服务器端完成，并且仅在需要时才完成(因此提前执行此操作并提供给客户端不是一种选择)。
我确信这是任何应用程序中的常见场景，但无法在互联网上找到解决此问题的合理方案。
提前致谢

Answer 1

并不是说场景不常见 - 你对它提出了一个奇怪的要求。在理想的设计中 - 您会要求客户打开 overdraw 功能，这将是对 api/settings 的单独 API 调用。端点也许。您将其与常规请求有效负载相结合，这会使事情变得稍微复杂一些。
您只需要一份足够详细的响应契约(Contract)和一个处理这些情况的前端，仅此而已。
我在下面 mock 了一个。
这是您在下面转移资金案例的说明。您可以将其中一些响应契约(Contract)修改为更具描述性，以便您可以处理更多情况。

发起从客户端(react-app)到服务器的传输请求。通行证转移详情。请注意，您将其标记为 DirectTry .

DirectTry由于账户资金问题而失败/但您确认您可以 overdraw 。我们将 guid 和交易信息、客户信息添加到字典中，以防万一客户想要验证 overdraw 。您可能也应该在这里到期。

将提示状态返回给 react-app。您可以使用从服务器传递到客户端的消息来扩展它 We need you to approve going into overdraft for this transaction/什么是后续状态等等...我们还传输了一个guid，只是为了确保它实际上是同一个设备，同一个交易请求将启用 overdraw 。

在 react-app 端，你会看到提示状态，启动一个通知组件，说点击这里批准你的 overdraw 。

您单击批准并将相同的 guid 传递给具有不同属性包的服务器端，这表明现在也允许 overdraw 。

交易通过。

public enum State
{
   // everything worked
   Done,

   // error - no retry needed.
   CriticalError,

   // additional prompt
   Prompt,
}

public class ServiceResult
{
   // some state.
   public State State { get; set; }

   ... some other props...
}

/// Part of some api controller
[Route("api/funds")]
[HttpPost]
public async Task<ServiceResult> TransferFunds(FundTransferPayload payload)
{
   // ... do some ops.
   ValidationResult validationResult; = new ValidationResult();
   if (payload.OperationType == OperationType.DirectTry)
   {
       validationResult = new ValidationResult();
   }
   // pass the guid we returned to front-end back to service to make sure
   else if (payload.OperationType == OperationType.PromptProvided)
   {
      validationResult = ValidateOp(
           ValidationDictionary[payload.promptGuid],
           payload.customerId,
           payload.operationType,
           payload.operationId);
   }

   var transferResult = await SomeService.SomeOps(validationResult);
   if (transferResult.Succeeded) {...}
   else if (transferResult.NeedsOverdraft)
   {
      var someGuid = new Guid();
      ValidationDictionary.Add(new Key(someGuid), new Value(payload.customerId, 'overdraft', transferResult.operationId));
      return new ServiceResult() { State=Prompt, ...otherprops... };
   }
   else if (transferResult.Failed) {...}
}

在你的前端是这样的......

axios.post('/api/funds', {
    operationType: 'DirectTry',
    ...some other props...
  })
  .then(function (response) {
    if (response.data.state === 'Prompt') {
      // save the guid or whatever token you're using - you'll call your API again with that.
      // change the UX with the prompt. Upon prompt, fire the request appropriately.
    }
  });