Nuxt Auth 用户信息

Nuxt Auth 是一个在 Nuxt.js 应用程序中处理身份验证的插件。它提供了一种简单且可靠的方式来管理用户身份验证，并为应用程序提供了用户信息。

获取用户信息

要获取认证用户的信息，可以在组件中使用 this.$auth.user 来访问用户对象。用户对象包含用户的各种属性和方法，例如用户的用户名、电子邮件、角色等。

以下是一个示例，展示如何在 Nuxt.js 页面或组件中获取和使用用户信息：

<template>
  <div>
    <h1>Welcome, {{ user.username }}</h1>
    <p>Email: {{ user.email }}</p>
    <p>Role: {{ user.role }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    if (this.$auth.loggedIn) {
      console.log('User:', this.$auth.user)
    }
  },
}
</script>

在上面的示例中，我们首先检查用户是否已登录，如果已登录，则在控制台打印用户对象。然后，我们在模板中使用用户对象的属性来显示用户的用户名、电子邮件和角色。

更新用户信息

Nuxt Auth 还提供了一种更新用户信息的方法。要更新用户信息，可以使用 this.$auth.setUserProperties 方法。该方法接受一个包含要更新的用户属性的对象。

以下是一个示例，展示了如何在 Nuxt.js 组件中更新用户信息：

<template>
  <div>
    <h1>Edit Profile</h1>
    <form @submit="updateUserProfile">
      <label for="username">Username</label>
      <input type="text" id="username" v-model="username" required>

      <label for="email">Email</label>
      <input type="email" id="email" v-model="email" required>

      <button type="submit">Save</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
    }
  },
  mounted() {
    if (this.$auth.loggedIn) {
      this.username = this.$auth.user.username
      this.email = this.$auth.user.email
    }
  },
  methods: {
    updateUserProfile() {
      const updatedUser = {
        username: this.username,
        email: this.email,
      }
      this.$auth.setUserProperties(updatedUser)
        .then(() => {
          console.log('User profile updated')
        })
        .catch((error) => {
          console.error('Failed to update user profile:', error)
        })
    },
  },
}
</script>

在上面的示例中，我们创建了一个简单的编辑个人资料的表单。在组件的 mounted 生命周期钩子中，我们从用户对象中获取当前的用户名和电子邮件，并将它们绑定到表单中的输入字段。

然后，当用户提交表单时，我们使用 this.$auth.setUserProperties 方法将更新的用户属性发送到服务器。在 Promise 的 then 回调中，我们可以处理成功更新用户信息的情况，而在 catch 回调中，可以处理更新失败的情况。

这样，你就可以使用 Nuxt Auth 来获取和更新用户信息了。

注意：以上示例假设你已经在 Nuxt.js 项目中正确配置了 Nuxt Auth，并将用户信息存储在适当的位置。