NextJs 客户端问题刷新会议

Question

我正在使用 next-auth 和 nextjs 创建一个网站，其中用户具有不同的 userTypes，并且基于该网站将呈现导航栏并从会话中获取 userType。

现在的问题是我有一个表单可以更新数据库中的 userType，但也需要在会话中更新才能生效

async session({ session, token }) {
      if (token) {
        session.user.id = token.id as string;
        session.user.image = token.image as string | null;
        session.user.userType = token.userType as string;
    
        if (token.id) {
          try {
            const { db } = await connectToDatabase();
            const userDoc = await db.collection('users').findOne({ _id: token.id });
    
            if (userDoc) {
              session.user = {
                id: userDoc._id.toString(),
                name: userDoc.name,
                email: userDoc.email,
                image: userDoc.image,
                userType: userDoc.userType,
              };

              token.user = { ...session.user };
            }
          } catch (error) {
            console.error('Error fetching user data from database:', error);
          }
        }
      }
    
      return session;
    }

此代码块位于后端 authOptions 中的回调函数内，用于更新后端中的会话，但我无法更新前端中的会话，以便导航栏重新加载新选项，除非我登录并注销以获取新会话.

我尝试从后端获取更新的会话，然后 使用

更新前端的会话

const { data: session, status, update } = useSession();

但我没能做到。

Answer 1

您希望在更新数据库中的 userType 后会话在前端自动刷新。问题是导航栏只有在用户注销并重新登录后才会更新。

在您的后端代码中，当用户登录时（创建令牌后），会话回调会正确更新会话，因此这里没有问题。

在前端，您尝试在客户端使用 useSession() 和 update() 手动刷新会话，以在更改 userType 后获取更新的会话，从而立即更新 UI。这是一个很好的方法，您遇到的问题可能是在数据库更改后没有调用 update() 或没有正确处理更新。

• 使用处理用户修改表单的前端组件。
• 确保您的导航栏组件使用 useSesison() 挂钩根据用户类型呈现 UI。
• 确保您拥有 API 路由，可以在提交表单后更新数据库中的用户类型。
• 确保您的前端组件通过调用 update() 更新 userType 并刷新会话。