Next.js 中的用户身份验证问题：注销后直至页面刷新均可访问受保护的路由

Question

我目前正在开发一个 Next.js 应用程序，我使用 cookie 和 Redux 实现了用户身份验证。我遇到了一个问题，即受保护的路由在用户注销后仍然可以立即访问，但在刷新整个页面后就变得无法访问。我希望获得有关如何有效解决此问题的指导。

问题描述：

1：身份验证过程：当用户登录时，身份验证令牌存储在 cookie 中，并且更新客户端身份验证状态（例如，在 Redux 中）。服务器返回存储在浏览器中的令牌。

2：注销：当用户单击“注销”按钮时，我向服务器发出 DELETE 请求以清除 cookie 中的身份验证令牌。我还调度一个操作来清除客户端身份验证状态。注销后，我将用户重定向到登录页面。

3：问题：注销后，我仍然可以访问受保护的路由，而不会被重定向到登录页面。但是，当我手动刷新页面时，受保护的路由将变得无法访问，这是所需的行为。

1：为什么受保护的路由在注销后可以立即访问，如何防止这种行为？ 是什么可能导致此问题，特别是考虑到页面刷新可以解决该问题？

2：在 Next.js 中实现用户身份验证和受保护路由时，是否应该遵循任何最佳实践或其他步骤来避免此类问题？

代码概述：

客户端注销处理：

const handleLogout = () => {
  const logout = async () => {
    try {
      await axios.delete(`${config.baseUrl}/users/logout`, {
        withCredentials: true,
      });
      dispatch(logoutUser());
      router.push("/login");
    } catch (error) {
      console.error("Logout failed:", error);
    }
  };

  logout();
};

Next.js 中间件：

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname;

  const isPublicPath = path === "/login" || path === "/signup";

  const token = request.cookies.get("token")?.value || "";

  if (isPublicPath && token) {
    return NextResponse.redirect(new URL("/", request.nextUrl));
  }

  if (!isPublicPath && !token) {
    return NextResponse.redirect(new URL("/login", request.nextUrl));
  }
}

服务器端注销端点：

exports.LogoutUser = catchAsyncErrors(async (req, res, next) => {

  clearCookie(res, "token");

  if (!req.cookies.token) {
    return next(new ErrorHandler("Login First to Logout", 200));
  }

  res.status(200).json({
    success: true,
    message: "User logged out successfully",
  });
});

如果您能提供有关如何确保受保护的路由在注销后立即得到持续保护的任何见解、建议或指导，我将不胜感激。

感谢您的协助。

Answer 1

我遇到了同样的问题，但无法找到解决问题的正确方法。我当前使用的简单方法是在用户未通过身份验证时替换 URL。 在 useEffect 中调用它会显示闪烁。所以直接在反应组件内部检查它

 if (!isAuthenticated) {
    router.replace("/login");
  }