Qwik中使用PropelAuth客户端出现序列化错误的求助

问题根源 #

Qwik的useStore要求存储的状态必须可序列化，但PropelAuth客户端实例包含addLoggedInChangeObserver这类函数方法，直接将实例存入useStore会触发序列化失败的错误。

解决方案 #

不要将完整的客户端实例存入useStore，改用useSignal存储客户端实例（支持非序列化值），仅将需要追踪的可序列化认证状态存入useStore：

import { createClient } from '@propelauth/javascript'
import { useSignal, useStore, useVisibleTask$ } from '@builder.io/qwik'

export default component$(() => {
  // 用useSignal存储PropelAuth客户端实例（无需序列化）
  const authClient = useSignal(null)
  // useStore仅存储可序列化的登录状态
  const authState = useStore({ loggedIn: null })

  useVisibleTask$(async () => {
    authClient.value = await createClient({ authUrl: 'https://91205364487.propelauthtest.com' })
    // 初始化登录状态
    authState.loggedIn = authClient.value.getAuthenticationInfoOrNull(true)

    // 若需监听登录状态变化，直接在客户端实例上添加观察者
    authClient.value.addLoggedInChangeObserver((newAuthInfo) => {
      authState.loggedIn = newAuthInfo
    })
  })

  // 业务逻辑中通过authClient.value调用客户端方法
  return (
    <div>
      {authState.loggedIn ? `欢迎，${authState.loggedIn.user.email}` : '未登录'}
    </div>
  )
})

关键说明 #

• useSignal：用于存储无需序列化的值（如对象实例、函数），Qwik不会对其value进行序列化处理，适合保存第三方客户端实例。
• useStore：仅存储需要响应式追踪的可序列化数据（如用户信息、登录状态），确保状态符合Qwik的序列化要求。

内容的提问来源于stack exchange，提问作者janat08