在带有 turbopack 的 Next.js 13 中，如何在没有 getServerSideProps 的情况下访问 cookies？

Question

我有一个在 cookie 中保留一些值的应用程序。 我知道还有其他工具，例如useState 、 useContext等...但是这个特定的应用程序与将信息存储在 jwt 中的库一起使用，所以我必须通过获取 jwt 来读取某些值。我正在从 next.js 移植应用程序12（使用 webpack）到 next.js 13（使用 turbopack）。

我已经在结构上移植了该应用程序以适应 next.js 13 的app样式路由。我的所有页面 go 都在其各自的文件夹中，子布局在app目录中，并且我在app目录中直接有一个主布局和主页。

next.js 12 中受保护页面的旧代码如下所示：

受保护的.tsx

import type { NextPage } from 'next';
import { GetServerSideProps } from 'next';
import { useContext } from 'react';

//@ts-ignore
import Cookies from 'cookies';

const Protected: NextPage = (props: any) => {
  if (!props.authorized) {
    return (
      <h2>Unauthorized</h2>
    )
  } else {
  return (
    <div className="max-w-md">
      <h1 className="font-bold">This is the Protected Section</h1>
    </div>
  )}
}

export const getServerSideProps: GetServerSideProps = async ({ req, res, query }) => {
  const { id } = query
  const cookies = new Cookies(req, res)
  const jwt = cookies.get('<MY TOKEN NAME>')
  if (!jwt) {
    return {
      props: {
        authorized: false
      },
    }
  }

  const { verified } = <MY TOKEN SDK INSTANCE>.verifyJwt({ jwt })

  return {
    props: {
      authorized: verified ? true : false
    },
  }
}

export default Protected

我现在将此页面移到了它自己的目录中。

Next.js 13 https://beta.nextjs.org/docs/data-fetching/fundamentals不支持“getServerSideProps”。 文档说“新的应用程序目录不支持以前的 Next.js API，例如 getServerSideProps、getStaticProps 和 getInitialProps”。 那么我将如何更改我的代码以在 Next.js 13 中工作？

PS 我知道它的样子，但这个 cookie 不处理用户身份验证。 我知道有人可以更改 cookie 并获得对受保护页面的访问权限。 这只是具有我已部署的其他安全机制的大型应用程序的一小部分。

Answer 1

import { cookies } from "next/headers";

这是next/headers.js cookie function

function cookies() {
    (0, _staticGenerationBailout).staticGenerationBailout('cookies');
    const requestStore = _requestAsyncStorage.requestAsyncStorage && 'getStore' in _requestAsyncStorage.requestAsyncStorage ? _requestAsyncStorage.requestAsyncStorage.getStore() : _requestAsyncStorage.requestAsyncStorage;
    return requestStore.cookies;
}

这是向客户端发出获取 cookie 的请求。 在app目录中，你在服务器上，你可以在组件中编写它。

const cookie = cookies().get("cookieName")?.value

Answer 2

您可以通过"cookies-next"库访问您的 cookie。

pnpm i cookies-next

检查一下： https://www.npmjs.com/package/cookies-next

Answer 3

您可以从next/headers服务器端获取 Nextjs 13 中的 cookies。

例子：

import axios from "axios";
import React from "react";
import { cookies } from 'next/headers'; // Import cookies

const getUser = async () => {

  const nextCookies = cookies(); // Get cookies object
  const token = nextCookies.get('token') // Find cookie

  try {
    const response = await axios.get("/user", {
      headers: {
        authorization: `bearer ${token}` // Use your cookie
      }
    })

    return response.data.user;

   } catch (err: any) {
     console.log(token);
     console.log(err.response.data);
     return null;
   }
};

export default async function Login() {

  const user = await getUser();

  if (!user) return <div className="text-red-500">No user found</div>;

  return <div>Logged in User:{JSON.stringify(user)}</div>;
}