如何使用 Nuxt 3 和 JWT 建立一个强大的身份验证系统

vue.js

2024-03-24 23:31:25

在 Nuxt 3 中构建基于 JWT 的身份验证系统

引言

在现代 Web 应用程序中，建立一个稳固的身份验证系统至关重要。本文将深入探讨如何在 Nuxt 3 中实现基于 JWT（JSON Web 令牌）的身份验证，重点关注通过电子邮件和密码进行登录。

构建登录页面

第一步是创建一个包含登录表单的登录页面组件。确保表单包含电子邮件、密码输入字段以及一个提交按钮。当用户提交表单时，应用程序将收集输入并向 API 发起登录请求。

发送登录请求

接下来，使用 fetch 方法将登录请求发送到 API。请求正文应包含电子邮件、密码和任何其他必需的参数。使用 try-catch 块来处理请求结果，并在成功时提取 JWT 令牌和用户详细信息。

设置全局 JWT 令牌

要保护应用程序的受限区域，需要在 fetch 钩子中设置 Authorization 标头，其中包含获取的 JWT 令牌。这将确保对受保护 API 路由的后续请求都携带 JWT 令牌。

验证登录状态

为了限制对特定页面或组件的访问，可以在组件的 fetch 钩子中或使用 useFetch composable 来验证登录状态。如果用户未登录，则将他们重定向到登录页面或显示错误消息。

代码示例

下面提供了一个示例登录组件，用于发送登录请求并提取 JWT 令牌：

<template>
  <form @submit.prevent="login">
    <input v-model="email" type="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</template>

<script>
import { ref } from 'vue'
import { useFetch } from 'nuxt/fetch'

export default {
  setup() {
    const email = ref('')
    const password = ref('')
    const { fetch } = useFetch()

    const login = async () => {
      try {
        const res = await fetch('/api/login', {
          method: 'POST',
          body: {
            email: email.value,
            password: password.value,
          },
        })

        // 提取 JWT 令牌和用户数据
        // ...

        // 设置全局 JWT 令牌
        // ...

        // 重定向到主页
        // ...
      } catch (err) {
        // 处理登录失败
        // ...
      }
    }

    return { email, password, login }
  },
}
</script>

在需要验证登录状态的页面组件中，可以使用以下代码：

<template>
  <div v-if="isAuthenticated">
    <h1>Welcome, {{ user.name }}</h1>
  </div>
  <div v-else>
    <p>You are not logged in.</p>
  </div>
</template>

<script>
import { definePageMeta } from 'nuxt/composables'
import { useFetch } from 'nuxt/fetch'

export default {
  setup() {
    const { fetch } = useFetch()
    const isAuthenticated = ref(false)
    const user = ref({})

    const fetchUser = async () => {
      try {
        const res = await fetch('/api/user')

        // 检查用户是否已登录并更新状态
        // ...

      } catch (err) {
        // 处理获取用户失败
        // ...
      }
    }

    // 在页面加载时获取用户
    fetchUser()

    return { isAuthenticated, user }
  },

  meta: definePageMeta({
    middleware: 'auth' // 仅当用户已登录时才渲染页面
  })
}
</script>