reCAPTCHA v2无操作超时时间是多少？vue-recaptcha如何解决过期问题

谷歌官方未公开reCaptcha V2的固定过期时长，根据实际测试和社区反馈，默认过期时间为用户完成验证后2分钟，但如果页面处于后台、用户无操作等场景下，过期时间可能提前到1分钟左右，和你遇到的实际表现吻合。

• 优先调整后端接口逻辑：将reCaptcha token校验步骤调整到长耗时业务逻辑执行之前。接口收到请求后第一时间校验token有效性，校验通过后再执行耗时业务，此时token从生成到校验的间隔仅为网络传输时间，完全不会触发过期，该方案改造成本最低，效果最优。
• 优化长耗时接口响应速度：如果业务逻辑允许，对接口进行异步改造、性能优化，将响应时长压缩到1分钟以内，从根源上避免过期问题。
• 前端逻辑适配：如果以上两种方案均无法落地，可以修改前端代码适配过期场景，修改参考如下：

修改后的onExpired方法：

onExpired: function () {
  this.recaptchaResponse = null
  // 重置验证码组件，提示用户重新验证
  this.$refs.recaptcha.reset()
  alert('验证码已过期，请重新完成验证后提交')
}

新增表单提交前置校验逻辑：

async handleSubmit () {
  // 提交前先判断验证码是否已完成
  if (!this.recaptchaResponse) {
    alert('请先完成人机验证')
    return
  }
  // 此处调用你的后端长耗时接口
  try {
    const submitRes = await yourSubmitApi({
      // 你的其他表单参数
      recaptchaResponse: this.recaptchaResponse
    })
    // 处理提交成功逻辑
  } catch (err) {
    // 若后端返回验证码过期错误码，主动触发过期逻辑
    if (err.code === 'RECAPTCHA_EXPIRED') {
      this.onExpired()
    }
  }
}

• 流程拆分适配：如果长耗时任务必须前置，也可以将提交流程拆分为两步：用户提交表单后先触发后端任务执行，前端轮询任务状态，待任务处理完成后再唤起reCaptcha验证，验证通过后完成最终提交，避免token等待过程中过期。

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