NextJS：如何在getServerSideProps重定向时传递隐藏数据？

针对你从邮件跳转并需要传递隐藏id到/my-work页面的需求，以下是几种可行的实现方案：

方案一：通过服务器端Cookie传递参数 #

利用服务器端设置HttpOnly Cookie存储id，重定向后目标页面读取并清除Cookie，既实现参数隐藏，又能避免前端篡改。

入口页面（邮件跳转的目标页面）的getServerSideProps： #

export async function getServerSideProps(context) {
  const { req, res, query } = context;
  const { id } = query;

  if (id) {
    // 设置HttpOnly Cookie，有效期设为10分钟（可按需调整）
    res.setHeader('Set-Cookie', `workId=${id}; Path=/; HttpOnly; Max-Age=600; SameSite=Lax`);
  }

  // 重定向到/my-work
  res.writeHead(302, { Location: '/my-work' });
  res.end();

  return { props: {} };
}

/my-work页面的getServerSideProps： #

export async function getServerSideProps(context) {
  const { req, res } = context;
  let workId = null;

  // 从请求头的Cookie中解析id
  if (req.headers.cookie) {
    const cookieMap = req.headers.cookie.split(';').reduce((acc, cookie) => {
      const [key, value] = cookie.trim().split('=');
      acc[key] = value;
      return acc;
    }, {});
    workId = cookieMap.workId;
  }

  // 读取后立即清除Cookie，避免残留
  if (workId) {
    res.setHeader('Set-Cookie', 'workId=; Path=/; HttpOnly; Max-Age=0; SameSite=Lax');
  }

  return {
    props: { workId } // 将id传递给页面组件使用
  };
}

方案二：利用服务器端会话存储参数 #

如果项目已集成会话管理（比如iron-session），可以将id存入会话，重定向后读取并移除该参数，适合需要跨页面传递敏感数据的场景。

入口页面的getServerSideProps（基于iron-session）： #

import { getIronSession } from 'iron-session';

// 提前配置会话选项（参考iron-session文档）
const sessionOptions = {
  password: process.env.SESSION_PASSWORD,
  cookieName: 'work-session',
  cookieOptions: {
    secure: process.env.NODE_ENV === 'production',
  },
};

export async function getServerSideProps(context) {
  const { req, res, query } = context;
  const { id } = query;

  if (id) {
    const session = await getIronSession(req, res, sessionOptions);
    session.workId = id;
    await session.save();
  }

  res.writeHead(302, { Location: '/my-work' });
  res.end();

  return { props: {} };
}

/my-work页面的getServerSideProps： #

import { getIronSession } from 'iron-session';

const sessionOptions = {
  password: process.env.SESSION_PASSWORD,
  cookieName: 'work-session',
  cookieOptions: {
    secure: process.env.NODE_ENV === 'production',
  },
};

export async function getServerSideProps(context) {
  const { req, res } = context;
  const session = await getIronSession(req, res, sessionOptions);
  const workId = session.workId;

  // 清除会话中的id
  delete session.workId;
  await session.save();

  return {
    props: { workId }
  };
}

方案三：加密查询参数（半隐藏） #

如果对参数隐藏要求不是极高，可将id加密后作为查询参数传递，目标页面解密，避免用户直接识别或篡改参数值。

工具函数示例（加密/解密）： #

// utils/crypto.js
import crypto from 'crypto';

const ENCRYPTION_KEY = Buffer.from(process.env.ENCRYPTION_KEY, 'hex');
const IV_LENGTH = 16;

export function encrypt(text) {
  const iv = crypto.randomBytes(IV_LENGTH);
  const cipher = crypto.createCipheriv('aes-256-cbc', ENCRYPTION_KEY, iv);
  let encrypted = cipher.update(text);
  encrypted = Buffer.concat([encrypted, cipher.final()]);
  return `${iv.toString('hex')}:${encrypted.toString('hex')}`;
}

export function decrypt(text) {
  const [ivHex, encryptedHex] = text.split(':');
  const iv = Buffer.from(ivHex, 'hex');
  const encryptedText = Buffer.from(encryptedHex, 'hex');
  const decipher = crypto.createDecipheriv('aes-256-cbc', ENCRYPTION_KEY, iv);
  let decrypted = decipher.update(encryptedText);
  decrypted = Buffer.concat([decrypted, decipher.final()]);
  return decrypted.toString();
}

入口页面的getServerSideProps： #

import { encrypt } from '../utils/crypto';

export async function getServerSideProps(context) {
  const { query, res } = context;
  const { id } = query;

  if (id) {
    const encryptedId = encrypt(id);
    res.writeHead(302, { Location: `/my-work?eid=${encryptedId}` });
    res.end();
    return { props: {} };
  }

  res.writeHead(302, { Location: '/my-work' });
  res.end();
  return { props: {} };
}

/my-work页面的getServerSideProps： #

import { decrypt } from '../utils/crypto';

export async function getServerSideProps(context) {
  const { query, res } = context;
  const { eid } = query;
  let workId = null;

  if (eid) {
    try {
      workId = decrypt(eid);
    } catch (error) {
      // 处理解密失败，比如重定向到错误页面
      res.writeHead(302, { Location: '/invalid-request' });
      res.end();
      return { props: {} };
    }
  }

  return {
    props: { workId }
  };
}

注意事项 #

• Cookie方案需确保邮件跳转的域名与站点域名一致，避免跨域Cookie问题；
• 会话方案需依赖会话管理库，适合已有会话机制的项目；
• 加密方案并非完全隐藏参数，但能有效防止参数被随意篡改或识别。

内容的提问来源于stack exchange，提问作者vidooo