---
title: "@xid-kit/angular"
description: "基于 @xid-kit/core 的 Angular 17+ standalone provider、RxJS 服务、函数式路由守卫和 standalone 组件。"
locale: "zh-Hans"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/zh-hans/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/angular

## 状态

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

## Provider 配置

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

```ts
// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideXid } from '@xid-kit/angular'

export const appConfig: ApplicationConfig = {
  providers: [
provideXid({ apiUrl: 'https://app.xid.dev' }),
  ],
}
```

## XidAuthService

```ts
import { Component, inject } from '@angular/core'
import { AsyncPipe } from '@angular/common'
import { XidAuthService } from '@xid-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(XidAuthService)
}
```

## Angular signals 桥接

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

```ts
import { toSignal } from '@angular/core/rxjs-interop'
import { inject } from '@angular/core'
import { XidAuthService } from '@xid-kit/angular'

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

## 路由守卫

```ts
import { Routes } from '@angular/router'
import { authGuard, hasOrganizationGuard, hasPermissionGuard } from '@xid-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),
  },
]
```

## 独立组件

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

## 导出的 API

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

Source: https://xid.dev/zh-hans/sdks/angular/index.mdx