Axios POST / вход в систему не работает на бэкэнде Rails API - PullRequest
Новая
       24

Axios POST / вход в систему не работает на бэкэнде Rails API

0 голосов
/ 10 мая 2019

У меня есть приложение Rails 5.2 только для API, которое используется интерфейсом VueJS. В настоящее время я работаю над аутентификацией 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
  }
})

маршрут входа в Почтальон работает: 

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

, но попытка веб-формы выдает ошибку:

создание пользователя из формы VueJS: 

Started POST "/users" for ::1 at 2019-05-10 14:03:38 -0400
Processing by UsersController#create as HTML
  Parameters: {"user"=>{"email"=>"userfive@gmail.com", "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", "userfive@gmail.com"], ["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", "userfive@gmail.com"], ["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"=>"userfive@gmail.com", "password"=>"[FILTERED]"}, "authentication"=>{"user"=>{"email"=>"userfive@gmail.com", "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)

1 Ответ

0 голосов
/ 11 мая 2019

Я видел, что логин должен быть {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))
}
...