Auth0 Vue 是一种用于 Vue 应用的身份验证和授权解决方案，提供了一套简单易用的 API 和 CLI 工具，帮助开发者快速集成身份验证功能，并支持 GitHub 登录等多种登录方式。

Auth0 Vue.js 集成 使用 @auth0/auth0-vue 向 Vue.js 3 单页应用程序添加身份验证。

前提条件 Vue 3+ 应用程序（Vite 或 Vue CLI） Auth0 账户和应用程序配置 如果您尚未设置 Auth0，请先使用 auth0-quickstart 技能 何时不使用 服务器端渲染的 Vue 应用程序 - 参阅 Auth0 Nuxt.js 指南以获取 SSR 模式 Vue 2 应用程序 - 本 SDK 需要 Vue 3+，请使用遗产 @auth0/auth0-spa-js 包装器 嵌入式登录 - 本 SDK 使用 Auth0 Universal Login（重定向式） 后端 API 身份验证 - 使用 express-openid-connect 或 JWT 验证代替

快速入门工作流

• 安装 SDK

npm install @auth0/auth0-vue

• 配置环境

对于使用 Auth0 CLI 的自动设置，请参阅设置指南以获取完整的脚本。 对于手动设置： 创建 .env 文件： VITE_AUTH0_DOMAIN=your-tenant.auth0.com VITE_AUTH0_CLIENT_ID=your-client-id

• 配置 Auth0 插件

更新 src/main.ts： import { createApp } from 'vue'; import { createAuth0 } from '@auth0/auth0-vue'; import App from './App.vue'; const app = createApp(App); app.use( createAuth0({ domain: import.meta.env.VITE_AUTH0_DOMAIN, clientId: import.meta.env.VITE_AUTH0_CLIENT_ID, authorizationParams: { redirect_uri: window.location.origin } }) ); app.mount('#app');

• 添加身份验证 UI

创建一个登录组件：

• 测试身份验证

启动开发服务器并测试登录流程： npm run dev

详细文档 设置指南 - 自动设置脚本（Bash/PowerShell）、CLI 命令、手动配置 集成指南 - 受保护的路由、API 调用、错误处理、组合式 API 参考 - 完整的 SDK API、配置选项、组合式参考、测试策略

常见错误 错误 解决方法 忘记在 Auth0 仪表板中添加重定向 URI 将应用程序 URL（例如 http://localhost:3000、https://app.example.com）添加到 Auth0 仪表板中的允许的回调 URL 中 使用错误的环境变量前缀 Vite 需要 VITE_ 前缀，Vue CLI 使用 VUE_APP_ 未处理加载状态 始终在渲染身份验证相关 UI 之前检查 isLoading 在 localStorage 中存储令牌 永远不要手动存储令牌 - SDK 处理安全存储 缺少 createAuth0 插件注册 必须在挂载应用程序之前调用 app.use(createAuth0({...})) 在插件加载之前访问身份验证 将身份验证相关代码包裹在 v-if="!isLoading" 中

相关技能 auth0-quickstart - 基本 Auth0 设置 auth0-migration - 从另一个身份验证提供者迁移 auth0-mfa - 添加多因素身份验证 auth0-cli - 从终端管理 Auth0 资源

快速参考 核心组合式：useAuth0() - 主身份验证组合式 isAuthenticated - 是否已登录的反应性检查 user - 用户个人资料信息的反应性检查 loginWithRedirect() - 初始化登录 logout() - 注销用户 getAccessTokenSilently() - 获取 API 调用的访问令牌 常见用例： 登录/注销按钮 → 参阅上述步骤 4 带有导航守卫的受保护路由 → 集成指南 带有令牌的 API 调用 → 集成指南 错误处理 → 集成指南

参考 Auth0 Vue SDK 文档 Auth0 Vue 快速入门 SDK GitHub 仓库