---
title: "客户端身份同步"
description: "通过监听 Better Auth 会话并调用 setIdentity，将服务端用户身份镜像到客户端日志中。"
canonical_url: "https://evlog.zhcndoc.com/use-cases/better-auth/client-sync"
---
# 客户端身份同步

> 通过监听 Better Auth 会话并调用 setIdentity，将服务端用户身份镜像到客户端日志中。

中间件会在服务端识别用户。要在 **客户端日志**（点击、导航、浏览器中捕获的错误）中获得相同的身份，请监听 Better Auth 会话，并将用户传递到 evlog 的客户端身份存储中。

## Vue / Nuxt

```typescript [composables/useAuthIdentity.ts]
import { authClient } from '~/lib/auth-client'

export function useAuthIdentity() {
  const session = authClient.useSession()

  watch(() => session.value?.data?.user, (user) => {
    if (user) {
      setIdentity({ userId: user.id, userName: user.name })
    } else {
      clearIdentity()
    }
  }, { immediate: true })
}
```

在你的根布局中调用一次：

```vue [app.vue]
<script setup>
useAuthIdentity()
</script>
```

## React

```tsx [hooks/useAuthIdentity.tsx]
import { useEffect } from 'react'
import { setIdentity, clearIdentity } from 'evlog/http'
import { authClient } from '@/lib/auth-client'

export function useAuthIdentity() {
  const { data } = authClient.useSession()

  useEffect(() => {
    if (data?.user) {
      setIdentity({ userId: data.user.id, userName: data.user.name })
    } else {
      clearIdentity()
    }
  }, [data?.user?.id])
}
```

在应用的根部接入它（在 `_app.tsx`、根布局或顶层提供器中）。

## Svelte

```typescript [src/lib/auth-identity.ts]
import { setIdentity, clearIdentity } from 'evlog/http'
import { authClient } from '$lib/auth-client'

export function setupAuthIdentity() {
  const session = authClient.useSession()

  session.subscribe(({ data }) => {
    if (data?.user) {
      setIdentity({ userId: data.user.id, userName: data.user.name })
    } else {
      clearIdentity()
    }
  })
}
```

在应用启动时调用一次 `setupAuthIdentity()`。

## 浏览器发送的内容

客户端日志现在会包含用户身份：

```json [Client Log]
{
  "level": "info",
  "tag": "checkout",
  "message": "用户点击了结账",
  "userId": "QBX9tPjJQExWawAbNll75",
  "userName": "Hugo Richard"
}
```

<tip>

`setIdentity` 是 evlog [客户端日志记录](https://evlog.zhcndoc.com/use-cases/client-logging)层的一部分。当客户端日志转发到你的服务端时，HTTP drain 也会获取相同的字段，因此同一个用户会在浏览器**和** API 日志中都以已识别的身份出现。
::。

</tip>

---

- [概览](https://evlog.zhcndoc.com/use-cases/better-auth/overview)
- [客户端日志记录](https://evlog.zhcndoc.com/use-cases/client-logging)


## Sitemap

See the full [sitemap](https://evlog.zhcndoc.com/sitemap.md) for all pages.