NextJS登录转注册预填账号：当前方案安全吗？sessionStorage可行吗？

我有一个NextJS应用的登录页面，当用户输入的邮箱未关联现有账号时，希望显示按钮跳转至注册页面，并预填用户在登录页输入的邮箱和密码。

目前我使用如下Link组件实现跳转：

<Link
  href={{
    pathname: '/signup',
    query: {
      email,
      password
    },
  }}
  as={'/signup'}
  passHref
>
  Go to signup
</Link>

输入的email和password会作为查询参数，借助as='/signup'属性，它们不会显示在浏览器地址栏中。

在注册页我通过以下代码获取这些参数：

const {
  query: {
    email,
    password
  }
} = useRouter()

我想了解这种方式是否安全、是否属于最佳实践，或者有没有更优方案？

[补充] 临时使用sessionStorage是否安全？

一、现有方案的问题 #

1. 安全风险高：虽然as属性隐藏了地址栏的参数，但这些参数会出现在HTTP请求的referrer头中（同域跳转时浏览器默认发送完整href作为referrer），服务器日志、第三方监控工具都可能捕获到包含明文密码的链接，直接导致密码泄露。
2. 不符合最佳实践：Next.js的query参数本质还是URL的一部分，用as隐藏属于“表面功夫”，既不稳定（用户刷新注册页后参数会丢失，预填功能失效），也不是传递敏感信息的合理方式。

二、更优替代方案 #

1. 客户端全局状态管理（推荐） #

用React Context或轻量状态管理库（比如Zustand、Jotai）在登录页暂存用户输入的邮箱和密码，注册页直接从全局状态读取预填：

• 登录页示例：

import { useTempFormStore } from '@/stores/tempForm'
import { useRouter } from 'next/router'
import { useState } from 'react'

const LoginPage = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const setTempForm = useTempFormStore(state => state.setTempForm)
  const router = useRouter()

  const handleGoToSignup = () => {
    setTempForm({ email, password })
    router.push('/signup')
  }

  return (
    <>
      {/* 登录表单输入框 */}
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleGoToSignup}>去注册</button>
    </>
  )
}

• 注册页示例：

import { useTempFormStore } from '@/stores/tempForm'
import { useState, useEffect } from 'react'

const SignupPage = () => {
  const tempForm = useTempFormStore(state => state.tempForm)
  const [email, setEmail] = useState(tempForm.email || '')
  const [password, setPassword] = useState(tempForm.password || '')

  // 组件卸载时清空临时状态，避免数据残留
  useEffect(() => {
    return () => useTempFormStore.getState().clearTempForm()
  }, [])

  return (
    <>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      {/* 注册提交按钮 */}
    </>
  )
}

2. Next.js路由状态参数（App Router适用） #

Next.js 13+的App Router中，router.push支持传递state参数，这部分数据仅在客户端路由跳转时保留，不会出现在URL或请求头中：

• 登录页跳转代码：

import { useRouter } from 'next/navigation'

const handleGoToSignup = () => {
  router.push('/signup', {
    state: { email, password }
  })
}

• 注册页获取参数：

import { useRouter } from 'next/navigation'

const SignupPage = () => {
  const router = useRouter()
  const { email, password } = router.state || {}
  const [formEmail, setFormEmail] = useState(email || '')
  const [formPassword, setFormPassword] = useState(password || '')

  return (
    {/* 注册表单 */}
  )
}

注意：页面刷新后state参数会丢失，仅适合纯客户端跳转场景。

三、关于sessionStorage的安全性 #

• 绝对不能存密码：sessionStorage是浏览器本地的明文存储，即便不随HTTP请求发送，一旦设备被恶意程序入侵（比如恶意插件、键盘记录器），或者在公共设备使用，密码会直接泄露。
• 可以临时存邮箱：邮箱属于非敏感信息，用sessionStorage暂存是安全的，但仍建议用状态管理方案更可控。

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