vue.js - 错误:在使用 Rails Api 的 Vue 中,接收到数据但 Vue 无法读取
问题描述
我有一个连接到 VueJS 前端的 rails api。我正在登录。当我输入凭据并单击登录时,将调用登录方法并在网络选项卡中,我看到响应,但 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)
}
}
}
我真的不确定问题是什么。
解决方案
如果它在数据中,您将调用 this.loggedUser。但是您已将其设置为常量。
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)
}
}
推荐阅读
- android - 文件上传在 Android WebView 中不起作用
- linq - 我们如何更改 Linq 表达式的 PropertyName?
- ssl - 安装 SSL 证书后 firefox 无法打开网站
- javascript - 无法使用子组件测试 React 容器
- javascript - 如何在 iframe 中选择文档及其子元素
- html - 如何使用 HTML5、CSS3 删除列中的空格
- c - 查找给定多面体的顶点
- python - 在python中将距离正方形转换为长格式
- c# - System.IO.FileNotFoundException 错误在 Xamarin.Forms 中构建 Android 项目
- python-3.x - 更新 tkinter 条目中的 StringVar