NextJS页面如何在保留原URL时跳转至权限不足页面？

要实现无权限访问时保留原URL并显示权限不足页面，核心是避免使用redirect（会触发地址栏跳转），直接返回权限不足组件并设置正确的HTTP状态码。具体修改步骤如下：

1. 创建PermissionRequired组件 #

先创建一个用于显示权限不足提示的组件（可根据需求自定义样式）：

// app/components/PermissionRequired.tsx
import Link from 'next/link';

export default function PermissionRequired() {
  return (
    <div className="mx-auto max-w-7xl space-y-4 py-8">
      <h1 className="text-2xl font-bold">权限不足</h1>
      <p>你没有访问该资源的权限，请返回资产列表页。</p>
      <Link href="/assets" className="px-4 py-2 bg-blue-500 text-white rounded inline-block">
        返回资产列表
      </Link>
    </div>
  );
}

2. 修改SpecificAssetPage页面代码 #

替换原有的重定向逻辑，改为直接返回PermissionRequired组件，并设置403（权限禁止）状态码：

import { getServerSession } from 'next-auth/next';
import { notFound, status } from 'next/navigation';
import authConfig from '@/auth.config';
import Breadcrumb from '@/components/Breadcrumb';
import AssetsDetails from '@/components/AssetsDetails';
import getSpecificAsset from '@/actions/getSpecificAsset';
import PermissionRequired from '@/components/PermissionRequired'; // 导入权限组件

export default async function SpecificAssetPage({
  params,
}: {
  params: SpecificAssetProps;
}) {
  const session = await getServerSession(authConfig);
  const assetId = params.id;

  // 先判断用户是否登录，未登录直接返回权限不足页面
  if (!session) {
    status(403);
    return <PermissionRequired />;
  }

  const userId = session.user.id;

  try {
    const specificAsset = await getSpecificAsset(assetId!, userId);
    return (
      <div className="mx-auto max-w-7xl space-y-4">
        <Breadcrumb
          crumbs={[
            { title: "Home", href: "/" },
            { title: "Assets", href: "/assets" },
            { title: specificAsset.name, href: `/assets/${assetId}` },
          ]}
        />
        <AssetsDetails asset={specificAsset} />
      </div>
    );
  } catch (error: unknown) {
    if (error instanceof Error) {
      if (error.message === "Asset not found") {
        notFound(); // 资源不存在时返回404
      } else if (error.message === "Unauthorized access") {
        // 设置403状态码，返回权限不足组件，地址栏保留原URL
        status(403);
        return <PermissionRequired />;
      }
    }
    // 其他未知错误处理
    status(500);
    return <div>服务器错误</div>;
  }
}

3. 关键逻辑说明 #

• 避免redirect：redirect会触发浏览器的导航行为，导致地址栏URL变更；直接返回组件是在当前请求上下文内渲染新内容，地址栏保持原请求URL不变。
• 设置403状态码：通过status(403)设置响应的HTTP状态码，符合REST语义，同时帮助搜索引擎和浏览器识别权限禁止的场景。
• 前置登录检查：在进入业务逻辑前先判断用户是否登录，避免不必要的数据库查询，同时统一未登录和无权限的处理逻辑。

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