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
。
3. 应用案例和最佳实践
应用案例
- 用户认证:使用 Nuxt Auth Utils 实现用户登录、登出和会话管理。
- 第三方认证:集成 OAuth 提供商,如 GitHub、Google 等,允许用户使用第三方账号登录。
最佳实践
- 安全配置:确保
NUXT_SESSION_PASSWORD
环境变量的值安全且唯一。 - 数据存储:由于会话数据存储在 Cookie 中,应避免存储敏感信息,并注意 Cookie 的大小限制。
4. 典型生态项目
- Nuxt.js:Nuxt Auth Utils 专为 Nuxt.js 设计,可以与 Nuxt.js 项目无缝集成。
- UnJS:Nuxt Auth Utils 依赖于 UnJS 的一些库,如
defu
用于合并对象。
以上是 Nuxt Auth Utils 的基本使用教程,希望对你有所帮助!
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考