Next.js 14.0.4 - 浏览器后退按钮允许在注销后访问受保护的路由

Question

说明： 我正在将 Next.js 版本 14.0.4 用于 Web 应用程序，并且在用户注销后遇到浏览器导航问题。具体来说，当用户注销并单击浏览器后退按钮时，他们仍然可以访问受保护的路由。但是，如果用户在注销后手动进入受保护的路由，则该组件不会渲染，并且中间件可以正常工作。

import { NextResponse } from "next/server";

export default function middleware(req) {
    let verify = req.cookies.get("loggedin");
    let url = req.url;

    if (!verify && url.includes("/dashboard")) {
        return NextResponse.redirect("http://localhost:3000/");
    }

    if (verify && url === "http://localhost:3001/") {
        return NextResponse.redirect("http://localhost:3000/dashboard");
    }
}

重现步骤：

登录应用程序。 导航到受保护的路线（例如“/dashboard”）。 登出。 单击浏览器后退按钮。 预期行为： 用户注销后，浏览器后退按钮不应允许访问受保护的路由。

实际行为： 浏览器后退按钮允许在注销后访问受保护的路由。

附加信息：

Next.js 版本：14.0.4 控制台中没有抛出任何错误消息。 注销后手动输入受保护的路由时，中间件似乎按预期工作。

Answer 1

这是单页应用程序的常见问题

(SPAs)

就像使用 Next.js 构建的应用程序一样，浏览器的缓存和历史记录允许用户即使在注销后也可以使用后退按钮查看以前加载的页面。

要

solve

它，有几种方法：

1-注销时重新加载整页：这可以清除状态并确保重新运行客户端检查，这是一个简单但不太优雅的解决方案，可确保再次执行客户端身份验证检查。要在注销功能上执行此操作，请添加以下内容

window.location.href = '/login'; // or any other page

2-缓存控制：另一种解决方案是将受保护路由的缓存控制设置为

no-store

。这指示浏览器不要缓存这些页面。

if (!verify && url.includes("/dashboard")) {
  response.headers.set("Cache-Control", "no-store");
  return NextResponse.redirect(new URL("/", req.url));
}

3-客户端检查 在受保护的页面上实施客户端检查，以验证用户是否仍通过身份验证。如果没有，请将它们重定向到远离该页面的位置。每次呈现页面时都应该进行此检查，而不仅仅是在初始加载时进行。

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

const ProtectedPage = () => {
    const router = useRouter();
    useEffect(() => {
        const verify = false; // replace false with cookie value for loggedin
        if (!verify) {
            router.push('/login');
        }
    }, []);

    // Rest of your component
}