无法将Google recaptcha 机器人识别的Token发送向后端

[EITSxiaozhai]

前端代码

<div prop="password2" id="grecaptcha"></div>


return {
      loginForm: {
        username: '',
        password: '',
        googlerecaptcha: '',
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        googlerecaptcha: [{ required: true}],
      },

  methods: {
    submit: function(token) {
      if (this.loginForm.googlerecaptcha) { // 确保password2不为空
        this.loginForm.googlerecaptcha = token;
        console.log(this.loginForm);
      } else {
        console.error('googlerecaptcha is empty');
      }
    },
    loaded() {
      setTimeout(() => {
        window.grecaptcha.render('grecaptcha',
          {
          sitekey: this.sitekey,
          callback: this.submit
        });
      }, 200)
    },
 
 
 handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

尝试使用抓包工具查询它发出去的包

POST /api/user/login HTTP/1.1
Host: 127.0.0.1:8000
Content-Length: 71
sec-ch-ua: "Chromium";v="113", "Not-A.Brand";v="24"
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.93 Safari/537.36
sec-ch-ua-platform: "Windows"
Origin: http://192.168.0.32:9527
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://192.168.0.32:9527/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: close

{"username":"1231","password":"23123123",}

它还是无法向后端发送password2的字段。是因为需要修改登录部分的api接口吗？

登录部分。还未修改过。

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

前端页面上可以正常显示Google验证码。用log也能打印出来。但是就是无法发送到后端。

[EITSxiaozhai]

需要在user.js上添加新的代码

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password, googlerecaptcha } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password, googlerecaptcha:googlerecaptcha }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },