this.$auth.loggedIn 返回 false

Question

当我从 nuxtjs 发送登录请求时，我在后端使用 laravel/passport 进行身份验证，并使用 nuxtjs 作为前端，如果登录成功，我会返回一个令牌和用户信息作为响应，然后用户将是重定向到/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 如何知道用户已登录？

这是直接在我点击登录后，我被重定向到个人资料，登录的响应如预期的那样，消息、令牌和信息，但在 /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 选项卡，你会发现那里有一些不错的状态。

这也回答了你的其他问题

既然登录发生在后端，那么 nuxt 如何知道用户已登录？

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

---

这是您成功登录所需执行的 2 个步骤。

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。

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

Answer 2

使用计算属性而不是data 属性：

<template>
  <div class="mt-6">loggedInUser: {{ loggedInUser }}</div>
</template>

<script>
export default{
  computed: {
     loggedInUser(){
       return this.$auth.loggedIn
      }
  }
}