@kyzmat-vue/auth

Описание

Библиотека аутентификации для Vue 3 с поддержкой TypeScript для платформы Kyzmat. Эта библиотека предоставляет функциональность OAuth аутентификации для приложений на Vue 3.

Возможности

• Совместимость с Vue 3
• Поддержка TypeScript
• OAuth аутентификация
• Управление токенами через cookies
• Легковесность и простота интеграции

Установка

npm install @kyzmat-vue/auth

Быстрый старт

1. Инициализация библиотеки в main.ts/main.js:

import { createApp } from "vue";
import { createAuth } from "@kyzmat-vue/auth";
import App from "./App.vue";

const app = createApp(App);

app.use(
  createAuth({
    clientId: "ваш-client-id",
    redirectUri: "http://localhost:3000/callback",
    apiUrl: "https://api.kyzmat.com",
  })
);

app.mount("#app");

2. Импорт стилей в main.ts/main.js:

import "@kyzmat-vue/auth/dist/index.css";

Компоненты

KyzmatButton

Предустановленный компонент кнопки для аутентификации:

<template>
  <KyzmatButton />
</template>

KyzmatCallback

Обработка OAuth callback. Можно использовать напрямую в Vue Router или как компонент:

В Vue Router:

import { createRouter } from "vue-router";
import { KyzmatCallback } from "@kyzmat-vue/auth";

const router = createRouter({
  routes: [
    {
      path: "/callback",
      component: KyzmatCallback,
    },
  ],
});

Или напрямую в компоненте:

<template>
  <KyzmatCallback />
</template>

KyzmatGuard

Защита маршрутов, требующих аутентификации:

<template>
  <KyzmatGuard> <ВашЗащищенныйКомпонент /> </KyzmatGuard>
</template>

Композаблы

useAuth

Основной композабл аутентификации:

import { useAuth } from "@kyzmat-vue/auth";

const { login, logout, isAuthenticated } = useAuth();

useToken

Управление токенами:

import { useToken } from "@kyzmat-vue/auth";

const { getToken, refreshToken } = useToken();

useUserState

Управление состоянием пользователя:

import { useUserState } from "@kyzmat-vue/auth";

const { user, setUser, clearUser } = useUserState();

useKyzmatGuard

Функциональность защиты маршрутов:

import { useKyzmatGuard } from "@kyzmat-vue/auth";

const { guard } = useKyzmatGuard();

Лицензия

MIT