Node.js开发GetStream聊天应用：userToken不匹配错误排查

1. connectUser执行时机错误 #

你的connectUser代码写在组件外部，若使用SSR框架（如Next.js），服务器端渲染阶段无法读取客户端Cookie，导致传入的id为undefined，而服务端生成的token中包含有效的user_id，二者不匹配触发错误。

2. Cookie名称大小写不一致 #

客户端设置Cookie时用的是userName，但connectUser中读取的是username，虽然这不是当前错误的直接原因，但会导致用户信息加载异常，可能引发后续问题。

3. 旧Cookie冲突 #

若浏览器中存在之前测试留下的旧Cookie，可能导致当前使用的token与userId不匹配。

1. 将connectUser移至组件内部的useEffect中 #

确保代码仅在客户端环境执行，正确读取Cookie：

import { useEffect } from 'react';

const App = () => {
  const authToken = cookies.get("token")?.value;
  const userId = cookies.get("userId")?.value;
  // 统一Cookie键名，和设置时一致
  const username = cookies.get("userName")?.value;
  const fullName = cookies.get("fullName")?.value;
  const avatarURL = cookies.get("avatarURL")?.value;

  useEffect(() => {
    if (authToken && userId) {
      client.connectUser(
        {
          id: userId,
          name: username,
          fullName: fullName,
          image: avatarURL,
          // 敏感信息不要存在Cookie中，建议移除hashedPassword
          phoneNumber: cookies.get("phoneNumber")?.value,
        },
        authToken
      ).catch(err => console.error('连接用户失败:', err));
    }
  }, [authToken, userId, username, fullName, avatarURL]);

  if (!authToken) return <Auth/>;
  
  return (
    <div className='app__wrapper'>
      <Chat client={client} theme='team light'>
        <ChannelListContainer />
        <ChannelContainer />
      </Chat>
    </div>
  )
}

export default App;

2. 统一Cookie键名 #

修改客户端AUTH.jsx中的Cookie设置，确保键名与读取时一致：

// handleSubmit函数中修正Cookie名称
cookies.set('username', username); // 替换原来的userName

3. 验证token与userId的一致性 #

• 使用JWT解码工具查看客户端authToken的payload内容，确认其中的user_id字段。
• 对比该值与Cookie中的userId，确保二者完全一致。
• 清除浏览器中所有相关旧Cookie，避免冲突。

4. 移除敏感信息存储 #

不要将hashedPassword这类敏感信息存在Cookie中，存在安全风险，且GetStream聊天功能不需要该字段。

内容的提问来源于stack exchange，提问作者Muhammad Abdullah Butt