@vonvon-kit/angular

Angular 17+ Standalone-Provider, RxJS-Service, funktionale Route-Guardsund Standalone-Komponenten auf Basis von @vonvon-kit/core.

Zustand

Registry-Status: UNPUBLISHED. Installieren Sie dieses SDK nur aus einem Checkout des Repository-Quellcodes; verwenden Sie keine externe Paket-Registry.

Paketstatus: Aktuelles Paket. Angular-17+-Standalone-Provider,RxJS-Service, funktionale Guards und Standalone-Komponenten sindimplementiert. Ein echter IdP-Round-Trip auf Produktionsinfrastruktursteht noch manuell aus.

Anbieter-Einrichtung

Rufen Sie provideVonvon in app.config.ts auf. Es registriertden VONVON_CLIENT-Injection-Token und verdrahtet einenAPP_INITIALIZER, der beim Bootstrap client.load() aufruft.Kein NgModule erforderlich.

// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideVonvon } from '@vonvon-kit/angular'

export const appConfig: ApplicationConfig = {
  providers: [
    // Core auth endpoints must be served on this application's exact origin.
    provideVonvon({ mode: 'same-origin' }),
  ],
}

VonvonAuthService

import { Component, inject } from '@angular/core'
import { AsyncPipe } from '@angular/common'
import { VonvonAuthService } from '@vonvon-kit/angular'

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @if (auth.isLoaded$ | async) {
      @if (auth.isSignedIn$ | async) {
        <span>{{ (auth.user$ | async)?.primaryEmailAddress }}</span>
      } @else {
        <a routerLink="/sign-in">Sign in</a>
      }
    }
  `,
})
export class HeaderComponent {
  readonly auth = inject(VonvonAuthService)
}

Angular-Signals-Bridge

Verwenden Sie toSignal() aus @angular/core/rxjs-interop, umObservables für Template-Lesezugriffe in Signals umzuwandeln.

import { toSignal } from '@angular/core/rxjs-interop'
import { inject } from '@angular/core'
import { VonvonAuthService } from '@vonvon-kit/angular'

@Component({ standalone: true, ... })
export class MyComponent {
  readonly #auth = inject(VonvonAuthService)
  readonly user = toSignal(this.#auth.user$, { initialValue: null })
}

Route-Guards

import { Routes } from '@angular/router'
import { authGuard, hasOrganizationGuard, hasPermissionGuard } from '@vonvon-kit/angular'

export const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard()],
    loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent),
  },
  {
    path: 'admin',
    canActivate: [hasPermissionGuard('org:settings:write')],
    loadComponent: () => import('./admin.component').then(m => m.AdminComponent),
  },
]

Standalone-Komponenten

<!-- template -->
<vonvon-sign-in-button signInUrl="/sign-in" redirectUrl="/dashboard">Log in</vonvon-sign-in-button>
<vonvon-sign-out-button redirectUrl="/home">Log out</vonvon-sign-out-button>

Exportierte API

Exportieren	Art	Zweck
`provideVonvon`	function	Registriert VONVON_CLIENT-Singleton und APP_INITIALIZER; akzeptiertProvideVonvonOptions
`VONVON_CLIENT`	InjectionToken	Die rohe VonvonClient-Instanz; bevorzugen Sie VonvonAuthService für die meistenAnwendungsfälle
`VonvonAuthService`	Service	RxJS-Observables: state$, isLoaded$, isSignedIn$, user$, session$,organization$; plus getToken, signOut, setActiveOrganization,setActiveSession
`authGuard`	CanActivateFn-Factory	Leitet zu /sign-in weiter, wenn der Benutzer nicht angemeldet ist
`hasOrganizationGuard`	CanActivateFn-Factory	Leitet weiter, wenn kein aktiver Organisationskontext vorhanden ist
`hasPermissionGuard`	CanActivateFn-Factory	Leitet weiter, wenn dem Benutzer die angegebene Berechtigung fehlt
`SignInButton`	Standalone-Komponente	Selektor vonvon-sign-in-button; Eingaben signInUrl, redirectUrl, ariaLabel
`SignOutButton`	Standalone-Komponente	Selektor vonvon-sign-out-button; Eingaben sessionId, redirectUrl, ariaLabel;zeigt aria-busy während des Abmeldens