PHP 中的 Laravel 使用https://laravel.com/docs/9.x/session#flash-data使這變得簡單，所以我認為 Next.js 也有一個簡單的方法。

我以為我可以做類似的事情：

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const session = await getSession(ctx);
  if (!session) {
   ctx.res.setHeader("yourFlashVariable", "yourFlashValue");
   console.log('headers', ctx.res.getHeaders()); // Why is it not even appearing here?

    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  const props = ...
  return { props };
};

然后在我的另一個頁面中：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { headers, rawHeaders } = context.req;
  // look inside the headers for the variable
  // ...

但是標題沒有出現。

如果您知道如何實作 flash 變數的目標（即使不使用標頭），我對任何方法都感興趣。

（最初我問由于在 Next.js 中使用 Next-Auth 缺少會話而重定向時如何顯示 toast 通知？但現在我覺得我應該問這個更通用的問題。）

更新

我很欣賞來自https://stackoverflow.com/a/72210574/470749的合理建議，所以已經嘗試過了。

不幸的是，index.tsx仍然沒有從getFlash.

// getFlash.ts

import { Session } from 'next-session/lib/types';

export default function getFlash(session: Session) {
  // If there's a flash message, transfer it to a context, then clear it.
  const { flash = null } = session;
  console.log({ flash });
  // eslint-disable-next-line no-param-reassign
  delete session.flash;
  return flash;
}

// getNextSession.ts

import nextSession from 'next-session';

export default nextSession();

// foo.tsx
import { getSession } from 'next-auth/react';
import { GetServerSideProps, InferGetServerSidePropsType, NextApiRequest, NextApiResponse } from 'next';
import getNextSession from '../helpers/getNextSession';

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const session = await getSession(ctx);
  if (!session) {
    const req = ctx.req as NextApiRequest;
    const res = ctx.res as NextApiResponse;
    const nSession = await getNextSession(req, res);
    nSession.flash = 'You must be logged in to access this page.'; // THIS LINE CAUSES A WARNING
    console.log({ nSession });
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
  // ...
  return { props };
};

// index.tsx
import { GetServerSideProps } from 'next';
import getFlash from '../helpers/getFlash';
import getNextSession from '../helpers/getNextSession';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getNextSession(context.req, context.res);
  let toast = getFlash(session);
  console.log({ toast });
  if (!toast) {
    toast = 'no toast';
  }
  console.log({ toast });
  return {
    props: { toast }, // will be passed to the page component as props
  };
};

此外，該nSession.flash =行會導致此警告：

警告 - 在 getServerSideProps 決議后，您不應訪問“res”。閱讀更多：https ://nextjs.org/docs/messages/gssp-no-mutating-res

uj5u.com熱心網友回復：

您的第一個代碼對我來說作業正常（在終端中列印標題）。但是，組合不會按預期作業，因為您在/foo（比如說）中設定的標頭將與狀態代碼 307 和位置標頭一起發送到瀏覽器/。現在“瀏覽器”將重定向到該位置，它不會轉發您的標題。類似執行緒：https : //stackoverflow.com/a/30683594、https: //stackoverflow.com/a/12883411。

為了克服這個問題，你可以做這樣的事情。這是因為瀏覽器會發送 cookie（在您創建會話時設定）。另請注意，session此示例中的 與 的不同next-auth。您可以同時擁有兩者，只需更改識別符號即可。

// lib/useFlash.js

export const useFlash = (session) => {
  // if there's a flash message, transfer
  // it to a context, then clear it
  const { flash = null } = session;
  delete session.flash;
  return flash;
};

// lib/getSession.js

import nextSession from 'next-session';
export const getSession = nextSession();

// pages/foo.jsx

import { getSession } from '../lib/getSession.js';

const Foo = () => null;
export default Foo;

export const getServerSideProps = async ({ req, res }) => {
  const session = await getSession(req, res);
  session.flash = { foo: 'bar' };
  return { redirect: { destination: '/', permanent: false } };
};

// pages/index.jsx

import { getSession } from '../lib/getSession';
import { useFlash } from '../lib/useFlash';

const Home = ({ flash }) => (flash ? <div>{JSON.stringify(flash)}</div> : <div>Hello World</div>);
export default Home;

export const getServerSideProps = async ({ req, res }) => {
  const session = await getSession(req, res);
  const flash = useFlash(session);
  return { props: { flash } };
};

您可以為 TS 修改它，但核心將保持不變。該實作改編自Ethan Brown的“使用 Node 和 Express 進行 Web 開發：利用 JavaScript 堆疊”。

標籤：节点.js 重定向 下一个.js http头 会话变量

上一篇：將PowershellStart-Process的結果添加到檔案中，而不是用-RedirectStandardOutput替換它

下一篇：如何避免使用Java進行Selenium重定向？