Nuxt身份验证模块未将登录用户设置为存储状态 [英] Nuxt auth module does not set loggedin user in store state
问题描述
我目前正在Nuxt身份验证模块的帮助下从事身份验证功能.
I am currently workin on Authentication functionality with the help of the Nuxt Auth Module.
在前端,我运行Nuxt Js,在后端,我运行Laravel 5.7
On the frontend i am running Nuxt Js, and on the backend i am running Laravel 5.7
在nuxt.config.js中,我已经设置了身份验证设置:
in nuxt.config.js i have set the auth settings:
auth: {
strategies: {
local: {
endpoints: {
login: { url: 'login', method: 'post', propertyName: 'access_token' },
logout: { url: 'logout', method: 'post' },
user: { url: 'user', method: 'get', propertyName: 'user' },
}
},
tokenRequired: true,
tokenType: 'bearer',
}
},
在我的index.vue中,我有一个使用登录方法的表单:
in my index.vue i have a form with the login method:
<template>
<div>
<div>
<b-container>
<b-row no-gutters>
<b-col col lg="12">
</b-col>
</b-row>
<b-row no-gutters>
<b-col col lg="12">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" label-position="top">
<el-form-item label="Email" prop="email">
<el-input v-model="ruleForm.email" ></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">Inloggen</el-button>
<!--<el-button @click="resetForm('ruleForm2')">Reset</el-button>-->
</el-form-item>
</el-form>
</b-col>
</b-row>
</b-container>
</div>
</div>
</template>
<script>
export default {
layout: 'login',
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Vul een wachtwoord in'));
} else {
callback();
}
};
return {
ruleForm: {
email: '',
password: '',
},
rules: {
password: [
{ validator: validatePass, trigger: 'blur' }
],
email: [
{ required: true, message: 'Vul een email in', trigger: 'blur' },
{ type: 'email', message: 'Vul een correct email adres in', trigger: ['blur'] }
]
}
};
},
methods: {
async login() {
try {
await this.$auth.loginWith('local', {
data: {
username: this.ruleForm.email,
password: this.ruleForm.password
}
}).then(() => {
this.$router.push({ name: 'dashboard'})
})
} catch (e) {
console.log(e)
}
},
}
}
</script>
当我尝试登录时,异步函数'login'被调用.返回与用户名和密码对应的用户. 我唯一的问题是,当我处于vuex状态时,auth.loggedIn保持为false,而auth.user保持为未定义.
When i try to login, the async function 'login' is being called. The user that corresponds with the username and password gets returned. The only problem i have, is that the when i look in the vuex state, auth.loggedIn stays false and the auth.user stays undefined.
我认为Nuxt Auth会自动更新状态,还是我丢失了什么?
I thought Nuxt Auth updates the state automatically, or am i missing something?
任何帮助将不胜感激:D
Any help would be greatly appreciated :D
推荐答案
我终于找到了解决方案.我必须将用户端点的属性名称设置为false
I finally found the solution. I had to set the propertyname of the user endpoint to false
旧版本
endpoints: {
login: { url: 'login', method: 'post', propertyName: 'access_token' },
logout: { url: 'logout', method: 'post' },
user: { url: 'user', method: 'get', propertyName: 'user' },
}
新版本
endpoints: {
login: { url: 'login', method: 'post', propertyName: 'access_token' },
logout: { url: 'logout', method: 'post' },
user: { url: 'user', method: 'get', propertyName: false },
}
现在用户处于加载状态
这篇关于Nuxt身份验证模块未将登录用户设置为存储状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!