vue.js - this.$auth.loggedIn 返回 false

Question

当我从 nuxtjs 发送登录请求时，我在后端使用 laravel/passport 进行身份验证，在前端使用 nuxtjs，如果登录成功，我会返回 token 和用户信息作为响应，然后用户将重定向到 /profile 页面，但是在 /profile 页面中，当我返回 this.$auth.loggedIn 我得到 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"
},

nuxt 如何知道用户已登录，因为登录发生在后端？

这是在我点击登录后直接发生的，我被重定向到个人资料，登录的响应如预期的那样，消息、 token 和信息，但在 /profile 页面中似乎我不是已登录!

Answer 1

即使您没有在自己的模块中使用 Vuex，nuxt/auth 也会为您创建一些状态。因此 this.$store.state.auth.loggedIn 的存在。顺便说一句，您是否尝试过在 profile.vue 文件中附加 $store？如图documentation .

像这样

<template>
  <div class="mt-6">
    loggedInUser: {{ $store.state.auth.loggedIn }}
  </div>
</template>

此外，打开你的 vue devtools 并检查 vuex 选项卡，你会在那里找到一些不错的状态。

这也回答了你的另一个问题

and how nuxt knows that a user is logged in since logging in happens in the backend?

Nuxt 检查来自服务器的响应并根据它，将 auth.loggedIn 的状态设置为 true 或 false。

---

这些是实现成功登录所需执行的 2 个步骤(使用 loginWith + setUser)。

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,
  })
}

在这些之后，loggedIn 可能会传递给 true。

当然，用户信息也可以从后端获取。取决于您的用例。