Ошибка: в Vue, использующем Rails Api, получены данные, но Vue не может их прочитать

#vue.js #vuex #rails-api

#vue.js #vuex #rails-api

Вопрос:

У меня есть rails api, подключенный к интерфейсу VueJS. Я работаю над входом в систему. Когда я ввожу учетные данные и нажимаю Войти, вызывается метод входа, и на вкладке Сеть я вижу ответ, но Vue выдает ошибку:

login error: TypeError: Cannot read property 'auth_token' of undefined

вот возвращаемые данные, как показано на вкладке сеть:

 {user: {id: 1, email: "test@test.ca",…},…}
auth_token: "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MDYwNDU3ODgsImlzcyI6Imlzc3Vlcl9uYW1lIiwiYXVkIjoiY2xpZW50IiwidXNlcl9pZCI6MX0.ZLlKtsdyqS-qFwJljvDsQeBxOJyU756q38-cX6MN_2Q"
user: {id: 1, email: "test@test.ca",…}
created_at: "2020-11-10T22:37:01.775Z"
email: "test@test.ca"
id: 1
password_digest: "$2a$12$bVmG1cvMidLice0Qcn8sBu36/F1HxhY0NeHT5gRKcAoV8u5Lk5wx6"
updated_at: "2020-11-10T22:37:01.775Z"
  

Вот мой метод входа:

    async signin () {
  try {
    console.log('base rute is: ', process.env.VUE_APP_ROOT_API)
    const response = await Api.post('users/login', {
      user: {
        email: this.email_input,
        password: this.password
      }
    })
    const loggedUser = response.data
    console.log('this is login response data: ', loggedUser)
    this.$store.commit('set_token', this.loggedUser.auth_token) [THIS IS WHERE THE ERROR IS THROWN]
    this.$store.commit('set_user', this.loggedUser.user)
    localStorage.setItem('token', this.loggedUser.auth_token)
    localStorage.setItem('user', JSON.stringify(this.loggedUser.user))
    this.$emit('authenticated', true)
  } catch (err) {
    console.log('login error: ', err)
  }
}
  

}

Я действительно не уверен, в чем проблема.

Комментарии:

1. Вы вводите данные loggedUser , но затем пытаетесь получить к ним доступ this.loggedUser

Ответ №1:

Вы бы вызвали this.loggedUser, если бы он был в data. Но вы установили его как постоянное.

 async signin () {
  try {
    console.log('base rute is: ', process.env.VUE_APP_ROOT_API)
    const response = await Api.post('users/login', {
      user: {
        email: this.email_input,
        password: this.password
      }
    })
    const loggedUser = response.data
    console.log('this is login response data: ', loggedUser)
    this.$store.commit('set_token', loggedUser.auth_token) 
    this.$store.commit('set_user', loggedUser.user)
    localStorage.setItem('token', loggedUser.auth_token)
    localStorage.setItem('user', JSON.stringify(loggedUser.user))
    this.$emit('authenticated', true)
  } catch (err) {
    console.log('login error: ', err)
  }
  }