在NextJS中:如何将用户信息从会话中获取到getServerSideProps()?

3z6pesqy  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(165)

我是第一次学习NextJS,在用户登录后试图构建主页时有点迷路。我似乎既无法获得Session数据来提供任何信息,也无法理解如何填补NextAuth和NextJS不同文档中的空白。
我不想在查询字符串中传递用户ID,而更喜欢使用会话数据来获取用户信息。
下面是我的pages/protected/index.tsx文件:

import SignOut from "@/components/sign-out";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import React from "react";
import { InferGetServerSidePropsType, GetServerSideProps } from "next";
import Router from "next/router";
import prisma from "@/lib/prisma";
import { Member, Tribe, User } from "@prisma/client";
import { authOptions } from 'pages/api/auth/[...nextauth]';
import { getServerSession } from 'next-auth/next';

type Victor = (
  User & {members: (Member & {tribe: Tribe})[]}
);

// export const getServerSideProps: GetServerSideProps<{victor: Victor}> = async () => {
//   const ses = await getSession();
//   const res = await prisma.user.findFirst({
//     include: {
//       members: {
//         include: {
//           tribe: true,
//         },
//       },
//     },
//     where: {
//       email: ses && ses.user && ses.user.email ? ses.user.email : '',
//     },
//   });
//   console.log(res);
//   return { props: {res}, };
// };

// export async function getServerSideProps(context) {
export async function getServerSideProps() {
  // const ses = await getServerSession(context.req, context.res, authOptions);
  const ses = await getServerSession(authOptions);
  
  const victor = await prisma.user.findFirst({
    include: {
      members: {
        include: {
          tribe: true,
        },
      },
    },
    where: {
      email: ses && ses.user && ses.user.email ? ses.user.email : '',
    },
  });

  console.log('SESSION DATA', ses);

  return { props: { victor }};
}

export default function Home({
  victor,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  console.log('PRINTING DATA', victor);
  return (
    <pre>...Data goes here...</pre>
  );
};

正如您可能从我的文件中推断的那样,我已经尝试了几种不同的方法来获取要拉入的数据。从NextAuth文档中,如果我向getServerSideProps()函数添加了一个context变量,我当前的设置应该可以工作,但我不知道该变量来自哪里或如何导入它。我也有一种感觉,我错过了一些概念上的东西,关于NextJS路由器如何工作,以及在最佳实践中应该把东西放在哪里。我以前使用过NodeJS,但我的主要背景是PHP和PHP框架,如Symfony,Wordpress,Codeigniter等。

laawzig2

laawzig21#

NextJS提供服务器端渲染、静态站点生成和客户端渲染。(https://nextjs.org/learn/foundations/how-nextjs-works/rendering
getServerSideProps()函数运行服务器端。这样web服务器就可以用返回的props预渲染页面。
getServerSideProps()中作为参数出现的context包含浏览器发送的GET请求和响应以接收该文件(即:GET)。您的页面)。如果我们使用getServerSession(),NextAuth将根据存储在浏览器cookies中的jwt获取我们的会话信息,GET包含在GET请求中。

相关问题