NextJs 使用 Next Auth 保护 API

Question

我在使用 NextAuth 构建 NextJs Web 时遇到问题。我在 pages/api 中创建了自己的 API 并使用 NextAuth 的 getSession 保护它。当我使用 getServerSideProps 或 getStaticProps 调用 API 时，getSession returns 为空值，但是当我在组件函数内部调用 API 时，getSession returns 为用户数据值。任何人都可以提供帮助或提示吗？

pages/index.jsx

export async function getStaticProps(context) {
  const projects = await fetchApi(`${process.env.BASE_URL}/projects`);
  console.log(projects)

  return {
    props: {},
  };
}

pages/api/项目

import { getSession } from 'next-auth/client';

async function handler(req, res) {
  const projectService = new ProjectService();

  let session;
  let emailUser;
  try {
    session = await getSession({ req });
    console.log(session);  // null
    emailUser = session.user.email;

    if (!session) {
      throw new AuthenticationError('No authenticated');
    }
  } catch (error) {
    if (error instanceof ClientError) {
      return res.status(error.statusCode).json(clientErrRes(error));
    }
  
    return res.status(500).json(serverErrRes(error));
  }

  ...another code
 }

Answer 1

您需要在从上下文中提取中添加 headers。因为你是从服务器端获取的。

const {req}=context
const {cookie} = req.headers

return fetch(`${process.env.BASE_URL}/projects`, {
  headers: {
    'Cookie':cookie
  }
})

Answer 2

您不能在 getStaticProps 中进行（每个用户）授权，因为这些页面是在编译时生成的。当您从反应组件（在运行时 - 从浏览器）调用 api 时，您是代表用户进行的，因此那里有一个会话（cookie）。

NextJs 使用 Next Auth 保护 API

NextJs protected API with Next Auth

session

next.js

next-auth