this.$auth.loggedIn 返回 false [英] this.$auth.loggedIn returning false
问题描述
当我从 nuxtjs 发送登录请求时，我在后端使用 laravel/passport 进行身份验证，并将 nuxtjs 作为前端使用，如果登录成功，我会返回一个令牌和用户信息作为响应，然后用户将重定向到 /profile 页面，但是在 /profile 页面中，当我返回 this.$auth.loggedIn 我得到 false!
login.vue
profile.vue
<div class="mt-6">loggedInUser: {{loggingInUser }}</div></模板><脚本>导出默认{数据() {返回 {登录用户:this.$auth.loggedIn}}}nuxt.config.js
auth: {策略:{提供者:'laravel/护照'，当地的: {用户:{属性:假，自动获取:真},端点:{登录:{ url: '/login', 方法: 'post', propertyName: 'token' },用户:{ 网址:'/用户'，方法:'获取'}},clientId: 'cleint_id',clientSecret: 'client_secret'}}},模块: ['@nuxtjs/axios',//https://go.nuxtjs.dev/bootstrap'bootstrap-vue/nuxt','@nuxtjs/auth',],轴:{baseURL:http://prostudent.test/api"；},由于登录发生在后端，nuxt 如何知道用户已登录?
这是直接在我点击登录后，我被重定向到个人资料，登录的响应与预期的一样，消息、令牌和信息，但在 /profile 页面中似乎我不是已登录！
即使您没有将 Vuex 与自己的模块一起使用，nuxt/auth 也会为您创建一些状态.因此存在 this.$store.state.auth.loggedIn.顺便说一句，您是否尝试在 profile.vue 文件中附加 $store ?如
这也回答了你的另一个问题
<块引用>由于登录发生在后端，nuxt 如何知道用户已登录?
Nuxt 检查来自服务器的响应，并根据响应将 auth.loggedIn 的状态设置为 true 或 false.
这些是成功登录所需的 2 个步骤.
const succesfulLogin = await this.$auth.loginWith('local', {数据: {电子邮件:this.email，密码:this.password，},})如果(成功登录){等待这个.$auth.setUser({电子邮件:this.email，密码:this.password，})}在这些之后，loggedIn 可能会传递给 true.
当然，user 信息也可以从后端获取.取决于您的用例.
I'm using laravel/passport for authentication in the backend and nuxtjs as frontend when I send a login request from nuxtjs, in case login success, I get back as a response a token and user informations and then the user will be redirected to /profile page, however in /profile page when I return this.$auth.loggedIn I'm getting false!
login.vue
<script>
export default {
data() {
return {
auth: false,
email: "",
password:""
}
},
methods: {
async login() {
try {
const data = { email: this.email, password: this.password }
await this.$auth.loginWith('local', { data:data})
.then(() => this.$router.push('/profile'))
} catch (e) {
}
}
}
}
</script>
profile.vue
<template>
<div class="mt-6">loggedInUser: {{ loggedInUser }}</div>
</template>
<script>
export default{
data() {
return {
loggedInUser:this.$auth.loggedIn
}
}
}
nuxt.config.js
auth: {
strategies: {
provider: 'laravel/passport',
local: {
user: {
property: false,
autoFetch: true
},
endpoints: {
login: { url: '/login', method: 'post', propertyName: 'token' },
user: { url: '/user', method: 'get' }
},
clientId: 'cleint_id',
clientSecret: 'client_secret'
}
}
},
modules: [
'@nuxtjs/axios',
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
'@nuxtjs/auth',
],
axios: {
baseURL: "http://prostudent.test/api"
},
and how nuxt knows that a user is logged in since logging in happens in the backend?
this is directly after I click on login, I get redirected to profile and the response of login is as expected, message, token and infos, but in /profile page seems like I'm not logged in!
Even if you're not using Vuex with your own modules, nuxt/auth creates some state for you. Hence the the presence of this.$store.state.auth.loggedIn. Btw, did you tried appending $store on your profile.vue file? As shown in the documentation.
Like this
<template>
<div class="mt-6">
loggedInUser: {{ $store.state.auth.loggedIn }}
</div>
</template>
Also, open your vue devtools and check the vuex tab, you'll find some nice state there.
This also answers your other question
and how nuxt knows that a user is logged in since logging in happens in the backend?
Nuxt checks the response from the server and depending of it, sets the state of auth.loggedIn to either true or false.
Those are the 2 steps that you need to do to achieve a successful login.
const succesfulLogin = await this.$auth.loginWith('local', {
data: {
email: this.email,
password: this.password,
},
})
if (succesfulLogin) {
await this.$auth.setUser({
email: this.email,
password: this.password,
})
}
After those, loggedIn may pass to true.
Of course, the user info can be fetched from the backend too. Depends of your use case.
这篇关于this.$auth.loggedIn 返回 false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
