Nuxt Auth Utils 使用教程

最新推荐文章于 2025-03-31 12:50:29 发布

高喻尤King

最新推荐文章于 2025-03-31 12:50:29 发布

阅读量630

点赞数 29

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00328/article/details/146812042

Nuxt Auth Utils 使用教程

nuxt-auth-utils Add Authentication to Nuxt applications with secured & sealed cookies sessions. 项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-auth-utils

1. 项目介绍

Nuxt Auth Utils 是一个为 Nuxt 应用程序提供认证功能的工具库。它支持多种认证方式，包括 OAuth、密码哈希和 WebAuthn 等。此工具库使得在 Nuxt 应用中添加认证功能变得简单快捷。它具有以下特点：

支持服务端渲染（SSR）、客户端渲染（CSR）、静态网站生成（SSG）等多种渲染方式。
内置 30+ OAuth 提供商支持。
支持密码哈希。
支持 WebAuthn（passkey）认证。
提供了 Vue 可组合函数 useUserSession，方便在 Vue 组件中访问用户会话。
提供了服务端工具，用于管理用户会话。
支持WebSocket。

2. 项目快速启动

以下是快速启动 Nuxt Auth Utils 的步骤：

在 Nuxt 项目中安装 Nuxt Auth Utils 模块：

npx nuxi@latest module add auth-utils

在项目根目录下的 .env 文件中添加环境变量 NUXT_SESSION_PASSWORD，该密码至少包含 32 个字符：

NUXT_SESSION_PASSWORD=password-with-at-least-32-characters

如果是在开发环境中首次运行 Nuxt 而没有设置该环境变量，Nuxt Auth Utils 会自动生成一个密码。

使用 Vue 可组合函数 useUserSession 在 Vue 组件中访问用户会话：

<template>
  <div v-if="loggedIn">
    <h1>Welcome {{ user.login }}!</h1>
    <p>Logged in since {{ session.loggedInAt }}</p>
    <button @click="clear">Logout</button>
  </div>
  <div v-else>
    <h1>Not logged in</h1>
    <a href="/auth/github">Login with GitHub</a>
    <!-- 或者在一个弹出窗口中打开 OAuth 路由 -->
    <button @click="openInPopup('/auth/github')">Login with GitHub</button>
  </div>
</template>

<script setup>
const { loggedIn, user, session, fetch, clear, openInPopup } = useUserSession()
</script>

配置 OAuth 提供商，例如 GitHub，在 nuxt.config.ts 中设置相应的 runtimeConfig：

export default defineNuxtConfig({
  runtimeConfig: {
    oauth: {
      github: {
        clientId: 'YOUR_GITHUB_CLIENT_ID',
        clientSecret: 'YOUR_GITHUB_CLIENT_SECRET'
      }
    }
  }
})

确保在 OAuth 应用的设置中将回调 URL 设置为 <your-domain>/auth/github。