@kyzmat/vue-auth v1.6.1

@kyzmat/vue-auth

Библиотека аутентификации OAuth для Vue 3 с поддержкой TypeScript

Установка

npm install @kyzmat/vue-auth

Использование

1. Настройка в main.ts

import { createApp } from "vue";
import KyzmatAuth, { createAuthConfig } from "@kyzmat/vue-auth";
import App from "./App.vue";

const app = createApp(App);

app.use(KyzmatAuth, {
  config: createAuthConfig({
    baseUrl: "https://api.example.com",
    endpoints: {
      auth: "/auth/login",
      token: "/auth/token",
      user: "/auth/me",
      refresh: "/auth/refresh",
    },
    storage: "cookies",
    tokens: {
      accessTokenExpiresIn: 7200,
      refreshTokenExpiresIn: 2592000,
    },
    redirectParams: {
      scope: "code",
      redirectUrl: "https://app.example.com/callback",
      clientId: "your-client-id",
      state: "random-state-string",
    },
  })
);

app.mount("#app");

Настройка хранилища

Вы можете настроить способ хранения токенов и данных пользователя. Доступны два варианта:

1. Без префикса - данные хранятся напрямую:

{
  storage: "localStorage",
  tokens: {
    accessTokenName: "token",
    refreshTokenName: "refresh_token",
    userName: "user"
  }
}
// Результат в localStorage:
// token: "..."
// refresh_token: "..."
// user: "..."

2. С префиксом - данные хранятся в структурированном виде:

{
  storage: "localStorage",
  storagePrefix: "aic-auth",
  tokens: {
    accessTokenName: "token",
    refreshTokenName: "refresh_token",
    userName: "user"
  }
}
// Результат в localStorage:
// aic-auth:token: "..."
// aic-auth:refresh_token: "..."
// aic-auth:user: "..."

Настройка cookies

Если вы используете cookies для хранения, вы можете настроить дополнительные параметры:

{
  storage: "cookies",
  cookies: {
    domain: ".example.com",
    path: "/",
    secure: true,
    sameSite: "strict"
  }
}

2. Использование в компонентах

<script setup lang="ts">
import { useAuth, useToken, useUserState } from "@kyzmat/vue-auth";

// Хуки аутентификации
const { login, logout, isAuth, isLoading } = useAuth();

// Работа с токенами
const { token, refreshToken } = useToken();

// Работа с данными пользователя
const { user, setUser } = useUserState();
</script>

<template>
  <div>
    <!-- Использование готовой кнопки -->
    <KyzmatButton label="Войти через OAuth" />

    <!-- Или собственная кнопка -->
    <button v-if="!isAuth" @click="login">Войти</button>
    <button v-else @click="logout">Выйти</button>

    <!-- Отображение данных пользователя -->
    <div v-if="user">
      <h2>Добро пожаловать, {{ user.name }}</h2>
    </div>
  </div>
</template>

3. Защита маршрутов

import { createRouter, createWebHistory } from "vue-router";
import { isAuthenticated } from "@kyzmat/vue-auth";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/protected",
      component: ProtectedComponent,
      meta: { requiresAuth: true },
    },
  ],
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next("/login");
  } else {
    next();
  }
});

Компоненты

KyzmatButton

<script setup lang="ts">
import { KyzmatButton } from "@kyzmat/vue-auth";
</script>

<template>
  <KyzmatButton />
</template>

Composables

useAuth

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

const { login, logout, refresh, isAuth, isLoading, error } = useAuth();
// login - функция входа
// logout - функция выхода
// refresh - функция обновления токена
// isAuth - статус аутентификации
// isLoading - статус загрузки
// error - ошибка, если есть

useToken

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

const { token, refreshToken, saveTokens, clear } = useToken();
// token - текущий access токен
// refreshToken - текущий refresh токен
// saveTokens - функция сохранения токенов
// clear - функция очистки токенов

useUserState

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

const { user, setUser, clearUser } = useUserState();
// user - данные пользователя
// setUser - функция установки данных пользователя
// clearUser - функция очистки данных пользователя

API Справочник

Конфигурация

interface AuthConfig {
  baseUrl: string; // backend link
  authUrl: string; // idInfocom link
  endpoints: {
    login: string; // Путь для авторизации
    token?: string; // Путь для получения токена
    user?: string; // Путь для получения данных пользователя
    refresh: string; // Путь для обновления токена
  };
  storage: "cookies" | "localStorage"; // Способ хранения токенов
  tokens: {
    accessTokenExpiresIn: number; // Время жизни access токена в секундах
    refreshTokenExpiresIn: number; // Время жизни refresh токена в секундах
    accessTokenName?: string; // Имя access токена
    refreshTokenName?: string; // Имя refresh токена
  };
  redirectParams: {
    scope: string; // Области доступа
    redirectUrl: string; // URL для перенаправления
    state: string; // Состояние для безопасности
    clientId: string; // ID клиента
    additionalParams?: Record<string, string>; // Дополнительные параметры
  };
  cookies?: {
    domain?: string; // Домен для cookies
    path?: string; // Путь для cookies
    secure?: boolean; // Безопасные cookies
    sameSite?: "strict" | "lax" | "none"; // Политика SameSite
  };
}

Возможности

• 🔒 Поддержка OAuth 2.0
• 🎯 Поддержка TypeScript
• 🍪 Хранение в cookies и localStorage
• 🔄 Автоматическое обновление токенов
• 👤 Управление состоянием пользователя
• 🛣️ Защита маршрутов
• 🎨 Гибкая конфигурация

Типы

import type { AuthConfig, User } from "@kyzmat/vue-auth";

Лицензия

MIT