Express 正确格式化VueJS中的身份验证请求对象

我有一个使用express/postgres api的VueJS/Vuex前端

在Postman中，注册和登录都可以处理如下请求：

{ "user": { "email": "user@gmail", "password":...}}

在Vue应用程序中，注册按预期工作，但用于登录，而不是发送请求对象，如

{ "user": { "email": "user@gmail", "password":...}}

，这是api所期望的，它只发送

{ "email": "user@gmail", "password":...}

这将导致api抛出：

TypeError:无法读取未定义的属性“email”

这是我的登录组件：

<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">Log In</h2>

      <Notification
        :message="notification.message"
        :type="notification.type"
        v-if="notification.message"
      />

      <form class="ui form" @submit.prevent="login">
        <div class="field">
          <label>Email</label>
          <input type="email" name="email" v-model="email" placeholder="Email" required>
        </div>

        <div class="field">
          <label>Password</label>
          <input type="password" name="password" v-model="password" placeholder="Password" required>
        </div>

        <button class="fluid ui primary button">LOG IN</button>

        <div class="ui hidden divider"></div>
      </form>

      <div class="ui divider"></div>

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Don't have an account? <router-link to="/signup">Sign Up</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Notification from '@/components/Notification'
export default {
  name: 'LogIn',
  components: {
    Notification
  },
  data () {
    return {
      email: '',
      password: '',
      notification: {
        message: '',
        type: ''
      }
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   const token = localStorage.getItem('tweetr-token')

  //   return token ? next('/') : next()
  // },
  methods: {
    login () {
      this.$store
        .dispatch('login', {
          email: this.email,
          password: this.password
        })
        .then(() => {
          console.log(this.$store.user)
          // redirect to user home
          this.$router.push('/')
        })
        .catch(error => console.log(error))
    }
  }
}
</script>

<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">Sign Up, it's free!</h2>

      <form class="ui form" @submit.prevent="signup">

        <div class="field">
          <label>Username</label>
          <input type="username" name="username" v-model="username" placeholder="Username">
        </div>

        <div class="field">
          <label>Email</label>
          <input type="email" name="email" v-model="email" placeholder="Email">
        </div>

        <div class="field" >
          <label>Password</label>
          <input type="password" name="password" v-model="password" placeholder="Password">
        </div>

        <button class="fluid ui primary button">SIGN UP</button>

        <div class="ui hidden divider"></div>
      </form>

      <div class="ui divider"></div>

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Got an account? <router-link to="/login">Log In</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SignUp',
  data () {
    return {
      email: '',
      password: '',
      username: '',
      notification: {
        message: '',
        type: ''
      }
    }
  },
  methods: {
    signup: function () {
      let data = {
        user: {
          email: this.email,
          password: this.password,
          username: this.username
        }
      }
      this.$store.dispatch('register', data)
        .then(() => this.$router.push('/'))
        .catch(err => console.log(err))
    },
  }
}
</script>

为了比较，这里是我的工作注册组件：

<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">Log In</h2>

      <Notification
        :message="notification.message"
        :type="notification.type"
        v-if="notification.message"
      />

      <form class="ui form" @submit.prevent="login">
        <div class="field">
          <label>Email</label>
          <input type="email" name="email" v-model="email" placeholder="Email" required>
        </div>

        <div class="field">
          <label>Password</label>
          <input type="password" name="password" v-model="password" placeholder="Password" required>
        </div>

        <button class="fluid ui primary button">LOG IN</button>

        <div class="ui hidden divider"></div>
      </form>

      <div class="ui divider"></div>

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Don't have an account? <router-link to="/signup">Sign Up</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Notification from '@/components/Notification'
export default {
  name: 'LogIn',
  components: {
    Notification
  },
  data () {
    return {
      email: '',
      password: '',
      notification: {
        message: '',
        type: ''
      }
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   const token = localStorage.getItem('tweetr-token')

  //   return token ? next('/') : next()
  // },
  methods: {
    login () {
      this.$store
        .dispatch('login', {
          email: this.email,
          password: this.password
        })
        .then(() => {
          console.log(this.$store.user)
          // redirect to user home
          this.$router.push('/')
        })
        .catch(error => console.log(error))
    }
  }
}
</script>

<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">Sign Up, it's free!</h2>

      <form class="ui form" @submit.prevent="signup">

        <div class="field">
          <label>Username</label>
          <input type="username" name="username" v-model="username" placeholder="Username">
        </div>

        <div class="field">
          <label>Email</label>
          <input type="email" name="email" v-model="email" placeholder="Email">
        </div>

        <div class="field" >
          <label>Password</label>
          <input type="password" name="password" v-model="password" placeholder="Password">
        </div>

        <button class="fluid ui primary button">SIGN UP</button>

        <div class="ui hidden divider"></div>
      </form>

      <div class="ui divider"></div>

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Got an account? <router-link to="/login">Log In</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SignUp',
  data () {
    return {
      email: '',
      password: '',
      username: '',
      notification: {
        message: '',
        type: ''
      }
    }
  },
  methods: {
    signup: function () {
      let data = {
        user: {
          email: this.email,
          password: this.password,
          username: this.username
        }
      }
      this.$store.dispatch('register', data)
        .then(() => this.$router.push('/'))
        .catch(err => console.log(err))
    },
  }
}
</script>

注册吧，这是免费的！
用户名
电子邮件
密码
注册

有账户吗？登录

导出默认值{
姓名：'注册'，
数据（）{
返回{
电子邮件：“”，
密码：“”，
用户名：“”，
通知:{
消息：“”，
类型：“”
}
}
},
方法：{
注册：函数（）{
让数据={
用户：{
电子邮件：this.email，
密码：this.password，
用户名：this.username
}
}
此.$store.dispatch（'register'，data）
。然后（（）=>这个。$router.push（'/'））
.catch（err=>console.log（err））
},
}
}

---

如何格式化请求对象以符合api的要求？

尝试以注册函数的类似结构发送有效负载：

 .dispatch('login', { 
   user: {
     email: this.email,
     password: this.password
   }
})

---

是的。谢谢你的帮助！