Better Auth 集成

客户端身份同步

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

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

Vue / Nuxt

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

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

app.vue
<script setup>
useAuthIdentity()
</script>

React

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

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

输出

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

Client Log
{
  "level": "info",
  "tag": "checkout",
  "message": "用户点击了结账",
  "userId": "QBX9tPjJQExWawAbNll75",
  "userName": "Hugo Richard"
}
setIdentity 是 evlog 的 client logging 层的一部分。当客户端日志被转发到你的服务器时,相同的字段也会被 HTTP 传输层获取,因此同一个用户会在浏览器日志 API 日志中都显示为已识别。