Vue项目onSubmit方法无法获取reCAPTCHA token及this指向报错求助

初始代码无法获取token的问题 #

• 核心原因是grecaptcha.execute()是异步方法，返回Promise对象，你在同步上下文直接读取t变量时，异步回调还未执行，所以t永远是初始值null。所有需要用到token的业务逻辑必须全部放到.then()的回调函数内部执行，不能写在回调外部。
• 初始调用grecaptcha.execute()时没有传入必填的sitekey参数，也会导致调用失败无法返回token。
• 你同时混用了两种reCAPTCHA加载模式：index.html中引入的是v3版本API（带render=my_site_key参数），模板中又添加了v2不可见版的g-recaptchaDOM元素，两者逻辑存在冲突，选一种即可，推荐使用v3显式调用写法，不需要额外添加DOM元素。
• 后端校验参数确实为g-recaptcha-response，把拿到的token作为该参数的值传递给后端即可完成校验。

后续this.login未定义的报错问题 #

• 该报错是this指向错误导致：你在.then()中使用了普通匿名函数function(token) {}，普通函数的this指向调用它的上下文（此处为全局上下文或者reCAPTCHA的执行上下文，不是Vue实例），所以找不到Vue实例上的login方法。
• 解决方法是将普通匿名函数替换为箭头函数，箭头函数会继承外层作用域的this指向，也就是当前Vue实例，修改后的参考代码如下：

onSubmit() {
  // 第一个参数传入你的sitekey，action可自定义，后端校验时可对应校验
  grecaptcha.execute('my_site_key', {action: 'login'}).then((token) => {
    // 所有业务逻辑都放在回调内部执行
    const payload = { 
      email: 'admin@admin.com', 
      password: '********',
      'g-recaptcha-response': token // 追加校验用的token参数
    };
    this.login(payload).then((response) => {
      // 后续登录逻辑
    });
  });
}

• 额外优化：如果使用v3版本的reCAPTCHA，模板中的div.g-recaptcha元素可以直接删除，只要引入了API脚本就能直接调用grecaptcha.execute方法。

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