我需要将“token”参数从“Vendas”组件（客户端）传递到“Home”组件（服务器端）。我正在尝试使用 cookie，但当它位于 iframe 内时，它在 Chrome 中不起作用。我已经将 cookie 设置为“sameSite: none”，但它不起作用。 'Home'组件尝试获取cookie时，cookie不存在。
我有哪些可能性可以这样做？我尝试了多种使用 localStorage 的方法，但由于 Home 组件是“服务器端”，所以它不起作用。
我该怎么做？
“Vendas”组件
"use client";
import { useRouter } from "next/navigation";
import { jwtDecode } from "jwt-decode";
import { useEffect } from "react";
import Lottie from "lottie-react";
import animationData from "@/animations/spinner.json";
import { setCookie } from "nookies";
interface TokenProps {
PROFILE: string;
WORKPLACE_ID: string;
sub: string;
exp: number;
}
export default function Vendas({
searchParams,
}: {
searchParams: { [key: string]: string | string[] | undefined };
}) {
const token = searchParams.token;
const router = useRouter();
useEffect(() => {
if (token != undefined && typeof token === "string") {
const decoded = jwtDecode<TokenProps>(token);
setCookie(undefined, "token", token, {
maxAge: 60 * 60 * 1,
sameSite: "none",
secure: true,
});
if (decoded.PROFILE === "GENERAL") {
router.push(`/vendas-varejo/geral`);
} else if (decoded.PROFILE === "SELLER") {
router.push(`/vendas-varejo/vendedor`);
} else {
router.push(`/vendas-varejo/loja`);
}
} else {
throw new Error("Token de acesso não encontrado");
}
});
return (
<div className="flex h-screen items-center justify-center bg-blue-700">
<div className="flex h-[70%]">
<Lottie animationData={animationData} />
</div>
</div>
);
}
“主页”组件
import { GeneralProps } from "@/@types/vendas-varejo/general";
import { fetcher } from "@/utils/api";
import Body from "./components/Body";
import { jwtDecode } from "jwt-decode";
import { cookies } from "next/headers";
interface TokenProps {
PROFILE: string;
WORKPLACE_ID: string;
sub: string;
exp: number;
}
export default async function Home() {
const cookieStore = cookies();
const token = cookieStore.get("token");
if (token?.value != undefined && typeof token === "string") {
const decoded = jwtDecode<TokenProps>(token);
if (decoded.PROFILE != "GENERAL") {
throw new Error("Você não tem permissão para acessar esta página");
}
}
async function getData() {
const data = await fetcher("/retail-sales", {
token: token?.value,
});
return data;
}
const data: GeneralProps = await getData();
return (
<>
<h1 className="mx-3 mt-2">
Última Atualização: {data.lastUpdate}
</h1>
<div>
<Body data={data} token={token?.value} />
</div>
</>
);
}
我不是一个react/nextjs 程序员。我已经尝试过使用 localStorage 但我不能，因为我不具备这样做的知识。我已经尝试使用 router.push 通过查询发送，但我认为我做得不对，而且我也不知道如何获取“HOME”组件中收到的参数。
我假设您指的是通过
searchParams“Home”组件可以使用相同的方法来访问这些
searchParams
// Assuming the URL is '/home?token=dummytoken'
export default async function Home({ searchParams }) {
const token = searchParams.token;
// Rest of your code using the token variable...
}