Next.js 13中认证完成后如何重定向至之前的请求页面？

当用户访问受保护路由时，若未认证需先跳转至登录页；认证成功后，再自动跳回用户最初请求的受保护路由，以下是具体实现方案：

1. 登录成功后的重定向逻辑 #

在登录组件中，通过useRouter获取路由实例，读取跳转登录页时携带的from参数，完成跳转：

import { useRouter } from "next/router"

const router = useRouter();

const onSuccess = () => {
    // 从路由参数中获取原请求地址
    const prev = router.query.from as string;
    // 跳转到原地址，若无则默认跳转首页
    router.replace(prev || '/');
};

2. 受保护路由的跳转拦截逻辑 #

在受保护路由组件中，判断用户未认证时，将当前路由地址作为from参数传递给登录页：

import { useRouter } from "next/router";
import { useEffect } from "react";

const ProtectedRoute = () => {
  const router = useRouter();
  // 替换为实际的认证状态判断逻辑
  const isAuthenticated = false;

  useEffect(() => {
    if (!isAuthenticated) {
      // 跳转至登录页并携带原请求地址
      router.push({
        pathname: "/login",
        query: { from: router.asPath }
      });
    }
  }, [isAuthenticated, router]);

  // 未认证时可返回加载组件或空
  if (!isAuthenticated) {
    return <div>加载中...</div>;
  }

  return <div>这是仅认证用户可见的受保护内容</div>;
};

export default ProtectedRoute;

关键说明 #

• router.asPath会获取当前路由的完整路径（包含查询参数），确保原请求的状态被保留
• 使用router.replace而非router.push，避免在浏览器历史记录中留下登录页的跳转记录，优化用户体验

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