@vonvon-kit/angular

基于 @vonvon-kit/core 的 Angular 17+ standalone provider、RxJS 服务、函数式路由守卫和 standalone 组件。

状态

Registry 状态:UNPUBLISHED。此 SDK 只能从仓库源码 checkout 安装；不要使用外部 package registry。

包状态为 当前包。Angular 17+ standalone provider、RxJS 服务、函数式守卫和 standalone 组件已实现。在真实生产基础设施上的 IdP 往返验证仍待人工核实。

Provider 配置

在 app.config.ts 中调用 provideVonvon。它注册 VONVON_CLIENT 注入令牌，并连接在启动时调用 client.load() 的 APP_INITIALIZER。无需 NgModule。

// 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 桥接

使用来自 @angular/core/rxjs-interop 的 toSignal() 将 observable 转换为 signal 以供模板读取。

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 })
}

路由守卫

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),
  },
]

独立组件

<!-- 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>

导出的 API

导出	类型	用途
`provideVonvon`	function	注册 VONVON_CLIENT 单例和 APP_INITIALIZER；接受 ProvideVonvonOptions
`VONVON_CLIENT`	InjectionToken	VonvonClient 原始实例；大多数情况下建议使用 VonvonAuthService
`VonvonAuthService`	服务	RxJS observable：state$、isLoaded$、isSignedIn$、user$、session$、organization$；以及 getToken、signOut、setActiveOrganization、setActiveSession
`authGuard`	CanActivateFn 工厂	用户未登录时重定向到 /sign-in
`hasOrganizationGuard`	CanActivateFn 工厂	无活跃组织上下文时重定向
`hasPermissionGuard`	CanActivateFn 工厂	用户缺少指定权限时重定向
`SignInButton`	独立组件	Selector vonvon-sign-in-button；输入 signInUrl、redirectUrl、ariaLabel
`SignOutButton`	独立组件	Selector vonvon-sign-out-button；输入 sessionId、redirectUrl、ariaLabel；登出时显示 aria-busy