SDK
Vue SDK
@authon/vue — 用于 Authon 认证的 Vue 3 插件、可组合函数和组件。支持 Composition API 和 <script setup>.
npm: @authon/vueVue 3+TypeScript
安装
bash
npm install @authon/vue插件配置
在应用入口文件中注册 Authon Vue 插件。这使所有可组合函数和组件全局可用，无需在每个文件中单独导入。
src/main.ts
import { createApp } from "vue";
import { createAuthon } from "@authon/vue";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(router);
app.use(createAuthon({
publishableKey: "pk_live_your_publishable_key",
// Optional — additional config passed to @authon/js
config: {
apiUrl: "https:1
},
}));
app.mount("#app");可组合函数
useAuthon()
用于认证操作的主要可组合函数。返回响应式 refs 和异步方法。
components/Header.vue
<template>
<header>
<nav v-if="!isLoading">
<template v-if="isSignedIn">
<span>Hello, {{ user?.displayName }}</span>
<button @click="signOut">Sign out</button>
</template>
<template v-else>
<button @click="() => openSignIn()">Sign in</button>
<button @click="() => openSignUp()">Sign up</button>
</template>
</nav>
</header>
</template>
<script setup lang="ts">
import { useAuthon } from "@authon/vue";
const {
isSignedIn,
isLoading,
user,
openSignIn, // async () => void — opens the modal
openSignUp, // async () => void — opens the sign-up modal
signOut,
getToken,
} = useAuthon();
</script>useUser()
用于读取用户数据的专注型可组合函数。适用于仅显示用户资料信息的组件。
ts
<template>
<div v-if="!isLoading && user" class="profile">
<img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="user.displayName ?? 0" />
<h2>{{ user.displayName }}</h2>
<p>{{ user.email }}</p>
</div>
</template>
<script setup lang="ts">
import { useUser } from "@authon/vue";
const { user, isLoading } = useUser();
</script>组件
安装插件时，所有 Authon Vue 组件均全局注册。它们以 Authon 为前缀以避免命名冲突。
AuthonSignedIn / AuthonSignedOut
根据认证状态显示或隐藏插槽内容的条件包裹组件。
App.vue
<template>
<div>
<AuthonSignedIn>
<!-- Rendered only when user is signed in -->
<Dashboard />
<AuthonUserButton />
</AuthonSignedIn>
<AuthonSignedOut>
<!-- Rendered only when user is NOT signed in -->
<LandingPage />
</AuthonSignedOut>
</div>
</template>AuthonSignIn / AuthonSignUp
ts
<template>
<div>
<!-- Renders an embedded sign-in form in place -->
<AuthonSignIn :after-sign-in-url="0" @sign-in="onSignIn" />
<!-- Renders an embedded sign-up form in place -->
<AuthonSignUp :after-sign-up-url="1" @sign-up="onSignUp" />
</div>
</template>
<script setup lang="ts">
import { AuthonSignIn, AuthonSignUp } from "@authon/vue";
function onSignIn(user: unknown) {
console.log("signed in", user);
}
function onSignUp(user: unknown) {
console.log("signed up", user);
}
</script>AuthonUserButton
即插即用的头像按钮，带有退出登录下拉菜单。用户未登录时不渲染任何内容。
ts
<template>
<header class="app-header">
<AppLogo />
<AuthonUserButton />
</header>
</template>路由守卫
使用authonGuard 保护需要认证的路由。用 meta.requiresAuth:
src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import { authonGuard } from "@authon/vue";
import Home from "@/views/Home.vue";
import Dashboard from "@/views/Dashboard.vue";
import Settings from "@/views/Settings.vue";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
component: Home,
},
{
path: "/dashboard",
component: Dashboard,
meta: { requiresAuth: true },
},
{
path: "/settings",
component: Settings,
meta: { requiresAuth: true },
},
],
});
// Redirect to /sign-in when meta.requiresAuth is true and user is not signed in
router.beforeEach(authonGuard({ signInPath: "/sign-in" }));
export default router;使用令牌
使用getToken() 来自 useAuthon() 将 JWT 附加到您的 API 请求：
ts
<script setup lang="ts">
import { useAuthon } from "@authon/vue";
import { ref, onMounted } from "vue";
const { getToken } = useAuthon();
const items = ref([]);
onMounted(async () => {
const token = getToken();
const res = await fetch("/api/items", {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
});
items.value = await res.json();
});
</script>