如何将Java后端生成的重置密码链接跳转至Next.js重置密码页

核心原则是完全对齐Java后端已经生成的链接格式，不改动后端现有逻辑，最小成本完成流程打通。

匹配Java生成的前端访问路由 #

Java后端生成的用户可点击链接路径是/account/reset/finish，携带key查询参数，需要让Next.js的路由和这个路径完全一致，避免用户点击后出现404。

App Router 模式（Next.js 13+ 版本） #

• 直接在项目的app目录下创建对应层级的文件结构：app/account/reset/finish/page.tsx

  该文件对应的访问路径自动就是/account/reset/finish，和Java生成的链接完全匹配，不需要额外配置路由映射

• 在页面组件中直接读取URL携带的key参数，做基础合法性校验后渲染密码重置表单：

  // app/account/reset/finish/page.tsx
  export default function ResetFinishPage({
    searchParams
  }: {
    searchParams: { key?: string }
  }) {
    // 无合法key时直接提示链接失效
    if (!searchParams.key) {
      return <div>重置链接无效，请重新发起申请</div>
    }
    // 将key传入表单组件，供提交时携带
    return <ResetPasswordForm resetKey={searchParams.key} />
  }
  

Pages Router 模式（Next.js 12及更早版本） #

• 直接在pages目录下创建对应层级的文件：pages/account/reset/finish.tsx
• 组件内通过路由钩子读取key参数：

  // pages/account/reset/finish.tsx
  import { useRouter } from 'next/router'
  export default function ResetFinishPage() {
    const router = useRouter()
    const resetKey = router.query.key as string | undefined
    if (!resetKey) {
      return <div>重置链接无效，请重新发起申请</div>
    }
    return <ResetPasswordForm resetKey={resetKey} />
  }
  

对接后端密码重置提交接口 #

后端的提交接口路径为/api/account/reset-password/finish，根据部署场景选择对应的代理配置：

• 同域开发/部署场景
  在next.config.js中配置重写规则，把前端发出的/api/*请求代理到Java后端服务，解决跨域问题：

  // next.config.js
  const nextConfig = {
    async rewrites() {
      return [
        {
          source: '/api/:path*',
          destination: 'http://127.0.0.1:8080/api/:path*'
        }
      ]
    }
  }
  module.exports = nextConfig
  

  配置完成后，前端表单提交时直接请求相对路径/api/account/reset-password/finish，请求体携带用户输入的新密码、URL中拿到的key参数即可。
• 跨域部署场景
  表单提交时直接请求Java后端的完整接口地址，提前在Java服务端配置CORS规则，放行Next.js站点的域名即可，不需要额外写代理规则。
• 表单提交的核心逻辑示例：

  async function submitResetRequest(newPassword: string, resetKey: string) {
    const response = await fetch('/api/account/reset-password/finish', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        key: resetKey,
        newPassword: newPassword
      })
    })
    if (response.ok) {
      // 重置成功，跳转登录页
      window.location.href = '/login'
      return
    }
    // 处理失败场景，比如key过期、密码格式不合法等提示
  }
  

常见配置避坑 #

• 不要随意改写Java生成的前端访问路径，比如把/account/reset/finish改成/reset，否则需要同步修改Java端生成邮件链接的逻辑，额外增加维护成本
• 如果项目使用Next.js中间件做全局登录鉴权，必须把/account/reset/finish路径加入鉴权白名单——密码重置场景的用户本身未登录，避免被中间件拦截跳转到登录页
• 注意区分前端页面路由和后端API路由：页面路由是用于渲染HTML给浏览器访问的，API路由是供前端发起数据请求的，二者不要混用路径

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