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() 로 API 요청에 JWT를 첨부하세요:
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>