使用 nuxt-auth 成功认证后如何获取用户信息

Posted 2023-02-22

【中文标题】使用 nuxt-auth 成功认证后如何获取用户信息

【英文标题】：How to get user info after a successful authentication with nuxt-auth

【发布时间】：2021-09-08 18:25:57

【问题描述】：

我正在使用 nuxt.js，在我向后端发送带有电子邮件和密码的登录请求后，我收到一个包含消息、令牌和用户信息的响应，我如何访问响应中的用户信息并保存它成功登录后在 store.js 中的某个状态下？ 我想使用操作saveUserAction 将用户对象保存在 store/index.js 中的用户状态中，该操作可能在成功登录后调度，我不知道这是否正确，任何建议都会很有帮助

回应

  "message":"success",
  "token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiNzFkYjA1MWM2MTYxMmE4YzAyNWI2YjU3N2xMzJiNzJjMjI0MzRlY2IzNzYwNTg2N2NjOWQ5ZWEwY2MiMJM3uYEiZ8GSlPlQhIctVErO2KzwXOBxifWWoM7et_qT-mgvfsk3ljwiQF9iPQw-WeekBx8J8lcmxDLESa3tfE1Re1Xk2flkcBLmiI4JN2YHh08U1U",
  "user":
    "id":1,
    "role_id":4587,
    "firstname":"Hans",
    "lastname":"newman",
    "email":"[e-mail]",
    "email_verified_at":null,
    "phone":"89498",
    "skype":"gdgdfg",
    "birthdate":"2021-05-02",
    "address":"asdfaf",
    "postalcode":14984,
    "city":"jisf",
    "country":"isfisf",
    "status":"mfof",
    "created_at":"2021-06-16T09:33:08.000000Z",
    "updated_at":"2021-06-16T09:39:41.000000Z",
    "image":"1623835988-carlsen.png",
    "description":"sfdgg",
    "geo_lat":5.5,
    "geo_lng":8.1
  

login.vue

<script>
import  mapActions  from 'vuex'

export default 
  data() 
    return 
      auth: false,
      email: '',
      password: '',
    
  ,

  methods: 
    async 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,
        )
        this.$router.push('/profile')
      
    ,
  ,

</script>

store/index.js

export const state = () => (
  user:
)
  
export const mutations = 
  saveUser(state, payload) 
    state.user=payload;
  


export const actions = 
   saveUserAction(commit, UserObject)
      commit('saveUser');
   

【参考方案1】：

转到您的 vue devtools，vuex 选项卡并查找 auth，它应该已经可用。这个答案可能会在您的调试过程中对您有所帮助：https://***.com/a/68081536/8816585

由于您在响应中确实有您的user 对象，因此这种配置应该可以做到，如documentation 所示。不需要做一些其他的 vuex 动作。

auth: 
  strategies: 
    local: 
      token: 
        property: 'token',
        global: true,
      ,
      user: 
        property: 'user', // the name of your object in your backend response payload
      ,
      endpoints: 
        [...]
      
    
  

【讨论】：

谢谢，auth 在那里，现在据我所知，json 响应现在保存在属性user 中，这个属性可以在代码中的任何地方访问吗？成功登录后如何使用调度语法？在push(/profile) 之后加上.then？

auth 模块基本上可以在您的后端响应中获取user 对象并直接将其注入Vuex（无需使用this.$auth.setUser），这要归功于我在回答中提供的配置。我的意思是，这两种方法都有效，但是由于您的响应负载中确实有 user 对象，因此请使用它，因为它可能比您的前端方法更“真实”（或完整）。

问题是当我不使用this.$auth.setUser时，用户不再被认为是loginIn，loggedIn返回false，当我使用它时```this.$auth.user```正在返回我在this.$auth.setUser中使用的电子邮件和密码