this.$auth.loggedIn 返回 false

Posted 2023-02-22

【中文标题】this.$auth.loggedIn 返回 false

【英文标题】：this.$auth.loggedIn returning false

【发布时间】：2021-09-05 21:47:21

【问题描述】：

当我从 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 页面中似乎我没有登录！

【问题讨论】：

您的商店中auth.loggedIn 的价值是多少？检查您的开发工具。

nuxt/auth 为你创建一个 vuex 状态。所以你实际上仍然有它的价值。

@kissu 我没用vuex，我的商店是空的，如果我没听错的话

@kissu 这是假的，用户也未定义

【参考方案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 信息也可以从后端获取。取决于您的用例。

【讨论】：

谢谢，我刚查过，用户未定义，登录为假

我只是尝试附加 $store 但不幸的是它没有工作

@AIB 我刚刚编辑了我的答案。什么没有奏效？请说得更具体些。

谢谢它的工作，你能告诉我我错过了什么吗？ setUser 做了什么？

loginWith 是当您将各种信息发送到后端以获得access_token 时，setUser 是当您切换 loggedIn 并在您的 vuex 前端“验证”用户时。更多信息在这里：auth.nuxtjs.org/api/auth/#setuseruser 当然，有时您需要从后端获取一些信息，因此模块也可以直接从服务器获取并获取用户名+密码。

【参考方案2】：

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

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

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