中间件会在服务端识别用户。要在 客户端日志(点击、导航、浏览器中捕获的错误)中获得相同的身份,请监听 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 日志中都显示为已识别。