PD WEB Plugins

Установка и подключение в проект

npm i @ozon-pd-web/plugins

Etcd

Создаём плагин ./plugins/etcd.ts

import type { InjectionKey } from 'vue';
import { inject } from 'vue';

import type { IEtcd } from '@ozon-pd-web/plugins/etcd';
import create from '@ozon-pd-web/plugins/etcd';

import type EtcdConfig from '@/../.local/etcd.json';
// Получим тип из .local/etcd
export type IEtcdConfig = typeof EtcdConfig.config;

export const EtcdKey: InjectionKey<IEtcd<IEtcdConfig>> = Symbol('etcd');

export const createEtcd = () =>
  create<IEtcdConfig>({
    pluginName: EtcdKey,
    refreshInterval: 2 * 60 * 1000,
  });

export const useEtcd = () => inject(EtcdKey) as IEtcd<IEtcdConfig>;

Подключаем плагин

import createEtcd from './plugins/etcd';
const etcd = await createEtcd();
app.use(etcd);

OR

await import('./plugins/etcd')
  .then(({ createEtcd }) => createEtcd())
  .then((etcd) => app.use(etcd));

Используем плагин

const { state: config } = useEtcd();
console.log(config.value.close)

Version

Создаём плагин ./plugins/version.ts

import type { InjectionKey } from 'vue';
import { inject } from 'vue';

import type { IVersion } from '@ozon-pd-web/plugins/version';
import create from '@ozon-pd-web/plugins/version';

import type VersionConfig from '@/../.local/version.json';
// Получим тип из .local/version
export type IVersionConfig = typeof VersionConfig;

export const VersionKey: InjectionKey<IVersion<IVersionConfig>> = Symbol('version');

export const createVersion = () =>
  create<IVersionConfig>({
    pluginName: VersionKey,
    refreshInterval: 2 * 60 * 1000,
  });

export const useVersion = () => inject(VersionKey) as IVersion<IVersionConfig>;

Подключаем плагин

import { createVersion } from './plugins/version';

const version = await createVersion();
app.use(version);

Используем плагин

const { state: env } = useVersion();
console.log(env.value);

Keycloak

Для инициализации рекомендуется использовать version

Создаём плагин ./plugins/keycloak.ts

import type { InjectionKey } from 'vue';
import { inject } from 'vue';

import type { IKeycloak } from '@ozon-pd-web/plugins/keycloak';
import create from '@ozon-pd-web/plugins/keycloak';

import type { IVersionConfig } from './version';

export const KeycloakKey: InjectionKey<IKeycloak> = Symbol('keycloak');

export const createKeycloak = (version: IVersionConfig) =>
  create(
    {
      pluginName: KeycloakKey,
      // refreshInterval: 2 * 60 * 1000,
    },
    {
      url: `${version.KEYCLOAK_ENDPOINT}/auth`,
      realm: version.REALMS,
      clientId: `k8s.${version.app_name}`,
    }
  );

export enum Roles {
  ADMIN = 'admin',
  USER = 'user',
}

export const useKeycloak = () => {
  const keycloak = inject(KeycloakKey) as IKeycloak;
  const { profile } = keycloak;

  function getName() {
    const { name, givenName, login } = profile.value;
    return name || givenName || login;
  }

  function getAvatar(size = 500) {
    return `https://nowatermark.ozone.ru/s3/staff-api/userspics/c${size}/${profile.value.login}.png`;
  }

  function getAllRoles() {
    return profile.value.roles as Array<Roles>;
  }

  function hasAnyRole(roles: Array<Roles>): boolean {
    const userRoles = getAllRoles();

    for (const role of roles) {
      if (userRoles.includes(role)) return true;
    }
    return false;
  }

  function getMaxRole(): Roles | undefined {
    const userRoles = getAllRoles();

    return [Roles.ADMIN, Roles.USER].find((role) => userRoles.includes(role));
  }
  return {
    profile,
    getName,
    getAvatar,
    getAllRoles,
    hasAnyRole,
    getMaxRole,
    logout: keycloak.logout,
  };
};

Подключаем плагин

import { createVersion } from './plugins/version';
import { createKeycloak } from './plugins/keycloak';

const version = await createVersion();
const keycloak = await createKeycloak(version.state);

app.use(version);
app.use(keycloak);

Используем плагин

const keycloak = useKeycloak();
console.log(keycloak.getName());

Logger

README ➡️