Next.js如何在不使用URL查询参数的情况下携带状态重定向？

你可以根据你使用的是Pages Router还是App Router选择对应方案，两种方案都不会把敏感参数暴露在URL中：

方案1：使用路由内置state参数（推荐，符合两步注册场景） #

Next.js的路由能力和react-router类似，原生支持跳转时附加隐式state参数，参数仅存在于浏览器history栈中，完全不会出现在URL里。

App Router（Next.js 13+）实现 #

// app/register/page.tsx （注册页）
'use client';
import { useRouter } from 'next/navigation';

export default function RegisterPage() {
  const router = useRouter();

  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const credentials = {
      username: formData.get('username') as string,
      password: formData.get('password') as string
    };
    // 跳转时附加state，参数不暴露在URL
    router.push('/new-user', { state: credentials });
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input name="username" type="text" required />
      <input name="password" type="password" required />
      <button type="submit">下一步</button>
    </form>
  );
}

// app/new-user/page.tsx （个人信息页）
'use client';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function NewUserPage() {
  const router = useRouter();
  const [credentials, setCredentials] = useState<{username?: string, password?: string}>({});

  useEffect(() => {
    // 从history栈中取隐式参数
    const state = window.history.state;
    if (!state?.username || !state?.password) {
      // 不是从注册页跳转过来的，直接回注册页
      router.replace('/register');
      return;
    }
    setCredentials({ username: state.username, password: state.password });
  }, [router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget as HTMLFormElement);
    // 合并所有参数调用创建用户接口
    await fetch('/api/create-user', {
      method: 'POST',
      body: JSON.stringify({
        ...credentials,
        nickname: formData.get('nickname'),
        avatar: formData.get('avatar')
      })
    });
    // 提交成功后跳转到首页/登录页，history栈的state会自动清理
    router.replace('/home');
  };

  // 剩下的个人信息表单代码
}

Pages Router 实现 #

逻辑和上面一致，仅路由API略有不同：

// 注册页跳转代码
import { useRouter } from 'next/router';
const router = useRouter();
router.push({
  pathname: '/new-user',
  state: { username, password }
});

// 个人信息页取值
const router = useRouter();
const credentials = router.state;

方案2：使用临时会话存储（适合需要支持刷新场景） #

如果你的场景允许用户在第二步刷新页面还能保留注册数据，可以用sessionStorage临时存储，它仅在当前浏览器标签会话生效，关闭标签就会自动销毁，比localStorage安全：

// 注册页存储
sessionStorage.setItem('register_temp', JSON.stringify({ username, password }));
router.push('/new-user');

// 个人信息页读取，用完立刻删除
useEffect(() => {
  const temp = sessionStorage.getItem('register_temp');
  if (!temp) {
    router.replace('/register');
    return;
  }
  const credentials = JSON.parse(temp);
  sessionStorage.removeItem('register_temp'); // 读取后立刻删除，避免敏感数据残留
  // 后续业务逻辑
}, [])

注意事项 #

• 不要用localStorage存储密码这类敏感信息，它会持久化留在用户本地，存在泄露风险
• 路由state方案仅支持客户端跳转，不要用服务端重定向或者原生<a>标签跳转，否则会丢失state
• 第二步调用接口完成后，无论成功失败都要清空所有临时存储的敏感数据

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