У меня есть приложение, которое сохраняет некоторые значения в файле cookie. Я знаю, что есть другие инструменты, такие как useState
, useContext
и т. д., но это конкретное приложение работает с библиотекой, которая хранит информацию в jwt, поэтому мне приходится читать определенные значения, извлекая jwt. Я переношу приложение с next.js 12 (с веб-пакетом) на next.js 13 (с турбопакетом).
Я уже портировал приложение структурно, чтобы оно соответствовало маршрутизации стиля app
next.js 13. Все мои страницы находятся в своих отдельных папках с подмакетами ВНУТРИ каталога 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
Теперь я переместил эту страницу в свой собственный каталог.
«getServerSideProps» не поддерживается в Next.js 13 https://beta.nextjs.org/docs/data-fetching/fundamentals. В документах говорится, что «предыдущие API-интерфейсы Next.js, такие как getServerSideProps, getStaticProps и getInitialProps, не поддерживаются в новом каталоге приложений». Итак, как мне изменить свой код, чтобы он работал в Next.js 13?
P.S. Я знаю, как это выглядит, но этот файл cookie НЕ ОБРАБАТЫВАЕТ АУТЕНТИФИКАЦИЮ ПОЛЬЗОВАТЕЛЯ. Я понимаю, что кто-то может изменить файл cookie и получить доступ к защищенной странице. Это всего лишь небольшая часть большого приложения с другими механизмами безопасности, которые у меня есть.
вы можете получить доступ к своим файлам cookie через библиотеку "cookies-next"
.
pnpm я куки-следующий
проверьте это: https://www.npmjs.com/package/cookies-next
import { cookies } from "next/headers";
это next/headers.js
функция cookie
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
has
используется для наборов. похоже это не комплект. можно пожалуйста просто console.info(cookies().get("cookieName")?.value)
Я получаю ту же ошибку, но я только что понял, что, возможно, мой файл cookie не устанавливается? Я пытаюсь установить cookie в другом файле, подобном этому cookies().set('lit-auth', litjwt, { expires: 1 });
. Но я только что понял, что, согласно документам, «Функция файлов cookie позволяет вам читать файлы cookie входящего HTTP-запроса с серверного компонента. Она доступна только для чтения, что означает, что вы не можете устанавливать/удалять файлы cookie исходящего запроса».... Итак, как мне установить файл cookie в Next.js 13?
вы можете проверить файлы cookie инструментов Chrome dev
Да, я не проверял файлы cookie... Итак, как мне установить файл cookie?
вы можете найти любую библиотеку файлов cookie. каждая библиотека файлов cookie имеет метод set
Я исправил это, я установил файл cookie с помощью cookies-next
, и я могу получить файл cookie точно так, как вы предложили. Он отлично работает с webpack, но не работает с turbopack. С турбопаком получаю TypeError: Class extends value #<Object> is not a constructor or null
что не имеет смысла... В любом случае спасибо за помощь. Я принимаю ваш ответ сейчас.
Судя по ошибке, которую я получаю, next не имеет функции
cookies()
...? Не знаю почему, но это исходный код моей страницы gist.github.com/ChristianOConnor/… . И я получаю эту ошибкуError: Cannot read properties of undefined (reading 'has')
imgur.com/a/WgnC24Z.