# @auth0/auth0-vue 中文文档

规范地址：https://npmcn.com/package/%40auth0/auth0-vue/

版本：2\.13\.0
npm 元数据更新时间：2026-10-30T11:47:39.781Z
中文译文更新时间：2026-11-07T05:50:58.261Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40auth0/auth0-vue
原文对照：https://npmcn.com/package/%40auth0/auth0-vue/?lang=original
项目主页：https://github.com/auth0/auth0-vue#readme
源码仓库：https://github.com/auth0/auth0-vue

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.6 MB，37 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：vue-router ^4\.0\.12 \|\| ^5\.0\.0
- 首次发布：2022-02-11T11:00:20.496Z
- 最新版本发布：2026-10-30T11:47:39.435Z
- 近 30 天下载量：491883（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 10 个）

## 中文简介

Auth0 SDK 用于 Vue 应用程序,使用授权代码 Grant Flow with PKCE

## 安装

```sh
npm install @auth0/auth0-vue
```

也可以使用：`pnpm add @auth0/auth0-vue`、`yarn add @auth0/auth0-vue`、`bun add @auth0/auth0-vue`

## README

![Auth0 SDK for Vue 3 Single Page Applications](https://cdn.auth0.com/website/sdks/banners/auth0-vue-banner.png)

![Release](https://img.shields.io/npm/v/@auth0/auth0-vue) [![Codecov](https://codecov.io/gh/auth0/auth0-vue/branch/main/graph/badge.svg)](https://codecov.io/gh/auth0/auth0-vue) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/auth0/auth0-vue) ![Downloads](https://img.shields.io/npm/dw/@auth0/auth0-vue) [![License](https://img.shields.io/:license-mit-blue.svg?style=flat)](https://opensource.org/licenses/MIT) [![CircleCI](https://img.shields.io/circleci/build/github/auth0/auth0-vue)](https://circleci.com/gh/auth0/auth0-vue)

📚 [文档](https://npmcn.com/package/%40auth0/auth0-vue/#readme-documentation) - 🚀 [开始](https://npmcn.com/package/%40auth0/auth0-vue/#readme-getting-started) - 💻 [API 参考](https://npmcn.com/package/%40auth0/auth0-vue/#readme-api-reference) - 💬 [反馈](https://npmcn.com/package/%40auth0/auth0-vue/#readme-feedback)

## 文档

-   [快速启动](https://auth0.com/docs/quickstart/spa/vuejs) - 使用 Auth0 将登录、登录和用户信息快速添加到 Vue 3 应用程序的交互式指南.
-   [样本 App](https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login) - 与Auth0合并的全能Vue 3应用程序.
-   [问题](https://github.com/auth0/auth0-vue/tree/main/FAQ.md) - 经常被问到关于Auth0 -veue SDK的问题.
-   [实例](https://github.com/auth0/auth0-vue/tree/main/EXAMPLES.md) - 普通Vue 3认证情景的代码样本.
-   [文档网站](https://www.auth0.com/docs) - 探索我们的文件网站 了解更多关于Auth0.

## 开始

### 所需资源

此库支持 **第3组** 应用. 将 Auth0 与 Vue 2 应用程序合并,请改为 [vue 2 教学](https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-login.md)。 。 。 .

### 安装

使用 [无](https://npmjs.org/)数字 :

```sh
npm install @auth0/auth0-vue
```

使用 [线条](https://yarnpkg.com/)数字 :

```sh
yarn add @auth0/auth0-vue
```

### 配置 Auth0

创建一个 **单页应用程序** 输入 [Auth0 剪贴板](https://manage.auth0.com/#/applications)。 。 。 .

> **如果你在使用现有的应用程序**,验证您在您的单页应用程序中配置了以下设置:
> 
> -   点击应用程序页面的“ 设置” 标签 .
> -   向下滚动并点击"显示高级设置"链接.
> -   在"高级设置"下,点击"OAuth"分页.
> -   确保“JsonWebToken 签名算法”设定为 `RS256` 而"OIDC Conformant"是启用的.

其次,在“设置”页面的“应用程序 URIs”栏下为您的应用程序配置以下URL:

-   **允许召回 URL**数字 : `http://localhost:3000`
-   **允许登录 URL**数字 : `http://localhost:3000`
-   **允许的 Web 来源**数字 : `http://localhost:3000`

> 这些 URL 应当反映您应用程序运行的源代码 . **允许召回 URL** 也可能包括一个路径,取决于你处理回调的地方(见下文).

注意到 **客户身份** 财务报告和审定财务报表 **域名** “基本信息”栏下的数值。 下一步你需要这些价值.

### 配置 SDK

创建实例 `Auth0Plugin` 拨打 `createAuth0` 传给Vue家 `app.use()`。 。 。 .

```js
import { createAuth0 } from '@auth0/auth0-vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    clientId: '<AUTH0_CLIENT_ID>',
    authorizationParams: {
      redirect_uri: '<MY_CALLBACK_URL>'
    }
  })
);

app.mount('#app');
```

### 添加登录到您的应用程序

为了在您的应用程序中添加登录, 您可以使用 `loginWithRedirect` 在返回值时被曝光的函数 `useAuth0`,可以在组件的 `setup` 函数.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { loginWithRedirect } = useAuth0();

      return {
        login: () => {
          loginWithRedirect();
        }
      };
    }
  };
</script>
```

一旦设置返回正确的方法,可以从组件的HTML中调用这种方法.

```html
<template>
  <div>
    <button @click="login">Log in</button>
  </div>
</template>
```

使用选项 API

```html
<template>
  <div>
    <button @click="login">Log in</button>
  </div>
</template>

<script>
  export default {
    methods: {
      login() {
        this.$auth0.loginWithRedirect();
      }
    }
  };
</script>
```

### 实验中心

> \[注\] [实验中心](https://auth0.com/docs/customize/experiment-center) 通过 SDKs 支持目前处于早期访问。 要请求访问此功能, 请联系您的 Auth0 代表 .

每个登录也可以强制使用特定的实验中心变体 `experiment_id`, (中文(简体) ), `variation_id`选择 `segment_id` 内 `authorizationParams` - 看这个 [实验中心实例](https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md#experiment-center)。 。 。 .

更多关于如何整合的代码样本 **自动执行** SDK在你身边 **第3组** 应用,看看我们 [实例](https://github.com/auth0/auth0-vue/tree/main/EXAMPLES.md)。 。 。 .

## API 参考

探索公共API在 Auth0-vue 中可用.

-   [创建 Auth0](https://auth0.github.io/auth0-vue/functions/createAuth0.html)
-   [创建 AuthGuard](https://auth0.github.io/auth0-vue/functions/createAuthGuard.html)
-   [用户 Auth0](https://auth0.github.io/auth0-vue/functions/useAuth0.html)
-   [是联邦域](https://auth0.github.io/auth0-vue/functions/isFederatedDomain.html)
-   [Auth0 缓冲选项](https://auth0.github.io/auth0-vue/interfaces/Auth0PluginOptions.html)
-   [Auth0Vue Client 选项](https://auth0.github.io/auth0-vue/interfaces/Auth0VueClientOptions.html)
-   [自动保存](https://auth0.github.io/auth0-vue/interfaces/Auth0VueClient.html)

## 反馈

### 捐款

我们赞赏反馈和对这次再投资的贡献! 在开始前,请参看以下内容:

-   [Auth0的一般贡献准则](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)
-   [Auth0 行为守则准则](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)
-   [这个Repo的贡献指南](https://github.com/auth0/auth0-vue/blob/main/CONTRIBUTING.md)

### 提出问题

请提供反馈或报告错误 [提出我们的问题追踪器](https://github.com/auth0/auth0-vue/issues)。 。 。 .

### 脆弱性报告

请不要在公共 GitHub 问题跟踪器上报告安全漏洞 。 这个 [负责任的披露程序](https://auth0.com/responsible-disclosure-policy) 详细说明披露安全问题的程序.

* * *

![Auth0 Logo](https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png)

Auth0是一个易于执行,可适应的认证和授权平台. 学习更多退房 [为什么是Auth0?](https://auth0.com/why-auth0)

这个项目根据麻省理工学院的许可证获得许可。 见 [自由主义](https://github.com/auth0/auth0-vue/blob/main/LICENSE) 需要更多信息的文件.

## 常见问题

### @auth0/auth0-vue 是什么？

Auth0 SDK 用于 Vue 应用程序,使用授权代码 Grant Flow with PKCE

### 如何安装 @auth0/auth0-vue？

在项目目录运行 npm install @auth0/auth0-vue，或使用 pnpm add / yarn add / bun add。

### @auth0/auth0-vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @auth0/auth0-vue 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @auth0/auth0-vue 可以商用吗？

@auth0/auth0-vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @auth0/auth0-vue 的下载量有多少？

根据 npm 官方下载统计，@auth0/auth0-vue 在 2026/10/07 – 2026/11/05 这 30 天内被下载 491,883 次，日均约 16,396 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @auth0/auth0-vue 还在维护吗？

最新版本 2\.13\.0 发布于 2026/10/30（8 天前）；至今共发布 29 个版本，其中过去 12 个月发布了 10 个；首次发布于 2022/02/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。