Axios邮政/登录请求不适用于Rails API后端

Question

我有一个由vuejs前端消耗的api-plo api-folly应用程序。我目前正在从事JWT身份验证。注册路由按预期工作，并在新用户中自动登录。但是，当我注销时，我无法登录。

login.vue：

<template>
 <div>
   <form class="login" @submit.prevent="login">
     <h1>Sign in</h1>
     <label>Email</label>
     <input required v-model="email" type="email" placeholder="Email"/>
     <label>Password</label>
     <input required v-model="password" type="password" placeholder="Password"/>
     <hr/>
     <button type="submit">Login</button>
     <button type="button" @click="register()">Register</button>
     <br/>
     <div>{{authStatus}}</div>
   </form>
 </div>
</template>
<script>
  export default {
    data(){
      return {
        email : "",
        password : ""
      }
    },
    computed: {
        authStatus() {
            console.log(this.$store.getters.authStatus);
            return this.$store.getters.authStatus;
        }
    },
    methods: {
      login: function () {
        let email = this.email 
        let password = this.password
        this.$store.dispatch('login', { user: { email, password } })
          .then(() => this.$router.push('/'))
          .catch(err => console.log(err))
      },
      register: function () {
        this.$router.push('/register');
      }
    }
  }
</script>

vuex Store.js：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    status: '',
    token: localStorage.getItem('token') || '',
    user: {}
  },
  mutations: {
    auth_request (state) {
      state.status = 'Signing in...'
    },
    auth_success (state, token, user) {
      state.status = 'success'
      state.token = token
      state.user = user
    },
    auth_error (state) {
      state.status = 'Invalid credentials'
    },
    logout (state) {
      state.status = ''
      state.token = ''
    }
  },
  actions: {
    register ({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        axios({
          url: 'http://localhost:3000/users',
          data: user,
          method: 'POST'
        })
          .then(resp => {
            const token = "Token " + resp.data.token
            const user = resp.data.user
            localStorage.setItem('token', token)
            axios.defaults.headers.common['authorization'] = token
            commit('auth_success', token, user)
            resolve(resp)
          })
          .catch(err => {
            commit('auth_error', err)
            localStorage.removeItem('token')
            reject(err)
          })
      })
    },
    login ({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        axios({ 
          url: 'http://localhost:3000/auth/login', data: user, method: 'POST' })
          .then(resp => {
            const token = "Token " + resp.data.user.token
            const user = resp.data.user
            localStorage.setItem('token', token)
            axios.defaults.headers.common['authorization'] = token
            commit('auth_success', token, user)
            resolve(resp)
          })
          .catch(err => {
            commit('auth_error')
            localStorage.removeItem('token')
            reject(err)
          })
      })
    },
    logout ({ commit }) {
      return new Promise((resolve) => {
        commit('logout')
        localStorage.removeItem('token')
        delete axios.defaults.headers.common['authorization']
        resolve()
      })
    }
  },
  getters: {
    isLoggedIn: state => !!state.token,
    authStatus: state => state.status
  }
})

登录路线在Postman中工作：

Started POST "/auth/login?email=[e-mail]&password=[FILTERED]" for ::1 at 2019-05-10 14:13:32 -0400
Processing by AuthenticationController#login as */*
  Parameters: {"email"=>"[e-mail]", "username"=>"userthree", "password"=>"[FILTERED]", "authentication"=>{"email"=>"[e-mail]", "username"=>"userthree", "password"=>"[FILTERED]"}}
  User Load (0.7ms)  SELECT  "users".* FROM "users" WHERE "users"."email" = $1 LIMIT $2  [["email", "[e-mail]"], ["LIMIT", 1]]
  ↳ app/controllers/authentication_controller.rb:6
Completed 200 OK in 92ms (Views: 0.3ms | ActiveRecord: 0.7ms)

，但是尝试Web表单会产生错误：

从vuejs表单创建用户：

Started POST "/users" for ::1 at 2019-05-10 14:03:38 -0400
Processing by UsersController#create as HTML
  Parameters: {"user"=>{"email"=>"[e-mail]", "username"=>"userfive", "password"=>"[FILTERED]"}}
   (0.1ms)  BEGIN
  ↳ app/controllers/users_controller.rb:19
  User Exists (0.3ms)  SELECT  1 AS one FROM "users" WHERE "users"."email" = $1 LIMIT $2  [["email", "[e-mail]"], ["LIMIT", 1]]
  ↳ app/controllers/users_controller.rb:19
  User Exists (0.3ms)  SELECT  1 AS one FROM "users" WHERE "users"."username" = $1 LIMIT $2  [["username", "userfive"], ["LIMIT", 1]]
  ↳ app/controllers/users_controller.rb:19
  User Create (2.6ms)  INSERT INTO "users" ("email", "password_digest", "created_at", "updated_at", "username") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["email", "[e-mail]"], ["password_digest", "$2a$10$nWB3zRUTrLo179BVWDUnXu3QyDU0j3FYoBsLjViLdGQSUbRzxwiRK"], ["created_at", "2019-05-10 18:03:38.107225"], ["updated_at", "2019-05-10 18:03:38.107225"], ["username", "userfive"]]
  ↳ app/controllers/users_controller.rb:19
   (1.1ms)  COMMIT
  ↳ app/controllers/users_controller.rb:19
Completed 201 Created in 73ms (Views: 0.6ms | ActiveRecord: 4.4ms)

但登录失败：

Started POST "/auth/login" for ::1 at 2019-05-10 14:09:30 -0400
Processing by AuthenticationController#login as HTML
  Parameters: {"user"=>{"email"=>"[e-mail]", "password"=>"[FILTERED]"}, "authentication"=>{"user"=>{"email"=>"[e-mail]", "password"=>"[FILTERED]"}}}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."email" IS NULL LIMIT $1  [["LIMIT", 1]]
  ↳ app/controllers/authentication_controller.rb:6
Completed 401 Unauthorized in 5ms (Views: 0.3ms | ActiveRecord: 0.7ms)

Answer 1

我看到登录有效载荷应为 {email, password}而不是 {user: {email, password}}

您可以尝试将登录方法更改为：

login: function () {
    let email = this.email 
    let password = this.password
    this.$store.dispatch('login', { email, password })
      .then(() => this.$router.push('/'))
      .catch(err => console.log(err))
}