@tribetech-org/auth

Angular библиотека для управления авторизацией и контролем доступа в микрофронтендах платформы ImpactOS.

Возможности

• AccessInterceptor — HTTP интерсептор для обработки 401/403/404 ответов с автоматическими редиректами
• AccessGuard — Route guard для проверки прав доступа к страницам
• AccessDirective — Структурная директива *accessControl для условного отображения элементов по правам
• UserInfoStore — NgRx SignalStore для хранения данных текущего пользователя
• CookieService — Сервис для работы с cookies

Установка

Библиотека доступна через path alias в рамках монорепозитория:

import { accessInterceptor, accessGuard, AccessDirective, UserInfoStore } from '@tribetech-org/auth';

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

AccessInterceptor

Перехватывает HTTP ошибки и выполняет редиректы:

• 401 → страница авторизации (с сохранением returnUrl)
• 403 → /forbidden
• 404 → /not-found

// app.config.ts
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { accessInterceptor } from '@tribetech-org/auth';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([accessInterceptor])),
  ]
};

AccessGuard

Проверяет права доступа перед загрузкой маршрута:

// routes.ts
import { accessGuard } from '@tribetech-org/auth';

export const routes: Routes = [
  {
    path: 'profile',
    loadComponent: () => import('./profile/profile').then(m => m.ProfilePage),
    canActivate: [accessGuard],
    data: {
      auth: {
        permission: 'CAN_VIEW_PROFILE'
      }
    }
  },
  // Динамический objectId из route params
  {
    path: 'document/:documentId',
    canActivate: [accessGuard],
    data: {
      auth: {
        idParameterName: 'documentId',
        permission: 'CAN_READ_DOCUMENT'
      }
    }
  }
];

AccessDirective

Условное отображение элементов по правам:

<!-- Скрыть кнопку если нет права -->
<button *accessControl="{ permission: 'CAN_EDIT_PROFILE' }">
  Редактировать
</button>

<!-- С objectId -->
<button *accessControl="{ objectId: document.id, permission: 'CAN_DELETE' }">
  Удалить
</button>

// component.ts
import { AccessDirective } from '@tribetech-org/auth';

@Component({
  imports: [AccessDirective],
  // ...
})
export class MyComponent {}

UserInfoStore

Хранилище данных текущего пользователя:

import { UserInfoStore } from '@tribetech-org/auth';

@Component({
  template: `
    @if (userStore.isAuthenticated()) {
      <img [src]="userStore.avatarUrl()" />
      <span>{{ userStore.fullName() }}</span>
    }
  `
})
export class HeaderComponent {
  readonly userStore = inject(UserInfoStore);

  async ngOnInit() {
    await this.userStore.loadUserInfo();
  }
}

Signals:

• userInfo() — данные пользователя или null
• isLoading() — флаг загрузки
• isAuthenticated() — computed: есть ли авторизованный пользователь
• fullName() — computed: полное имя (Фамилия Имя Отчество)
• avatarUrl() — computed: URL аватара

Methods:

• loadUserInfo() — загрузка данных пользователя
• clearUserInfo() — очистка (при logout)

API Endpoints

Библиотека использует следующие backend endpoints:

| Endpoint | Method | Описание | |----------|--------|----------| | /user/api/v1/auth/access | POST | Проверка прав доступа | | /user/api/v1/auth/user-info | GET | Получение данных пользователя |

Кеширование

Результаты проверок прав кешируются в cookies (tribetech_access_cache) и привязаны к сессии пользователя (impactos_session). При смене сессии кеш автоматически инвалидируется.

Сборка

ng build tribetech-auth

Артефакты сборки будут в dist/tribetech-auth/.