Auth0 Vue.js 集成

使用 @auth0/auth0-vue 为 Vue.js 3 单页应用（SPA）添加身份认证功能。

前提条件

• Vue 3+ 应用（基于 Vite 或 Vue CLI 构建）
• 已注册 Auth0 账户并完成应用配置
• 若尚未配置 Auth0，请先使用 auth0-quickstart 技能完成基础设置

不适用场景

• 服务端渲染（SSR）的 Vue 应用 —— 请参考 Auth0 Nuxt.js 指南了解 SSR 相关模式
• Vue 2 应用 —— 本 SDK 仅支持 Vue 3+；如需 Vue 2 支持，请使用旧版 @auth0/auth0-spa-js 封装器
• 嵌入式登录（Embedded Login） —— 本 SDK 使用 Auth0 通用登录（Universal Login），基于重定向方式实现
• 后端 API 的身份认证 —— 请改用 express-openid-connect 或 JWT 校验方案

快速上手流程

1. 安装 SDK

npm install @auth0/auth0-vue

2. 配置环境变量

如需通过 Auth0 CLI 自动化配置，请参阅《Setup Guide》获取完整脚本。

如需手动配置：

创建 .env 文件：

VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id

3. 配置 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');

4. 添加认证 UI

创建登录组件：

5. 测试身份认证

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

npm run dev

详细文档

• Setup Guide（配置指南） —— 提供自动化配置脚本（Bash / PowerShell）、CLI 命令及手动配置说明
• Integration Guide（集成指南） —— 包含受保护路由、API 调用、错误处理、组合式函数（composables）等实践指导
• API Reference（API 参考） —— 完整 SDK 接口说明、配置选项、组合式函数参考及测试策略

常见错误

相关技能

• auth0-quickstart —— Auth0 基础配置
• auth0-migration —— 从其他认证服务商迁移
• auth0-mfa —— 启用多因素认证（MFA）
• auth0-cli —— 通过终端管理 Auth0 资源

速查表

核心组合式函数（Composables）：

• useAuth0() —— 主认证组合式函数
• isAuthenticated —— 响应式判断用户是否已登录
• user —— 响应式用户资料信息
• loginWithRedirect() —— 触发登录流程
• logout() —— 注销当前用户
• getAccessTokenSilently() —— 静默获取访问令牌（用于 API 调用）

常见使用场景：

• 登录/登出按钮 → 参见上方第 4 步
• 带导航守卫（Navigation Guards）的受保护路由 → 参见《Integration Guide》
• 携带令牌的 API 调用 → 参见《Integration Guide》
• 错误处理 → 参见《Integration Guide》

参考资料

• Auth0 Vue SDK 文档
• Auth0 Vue 快速入门（Quickstart）
• SDK GitHub 仓库