Next.js按角色限制路由访问：禁止普通用户登录后进入/inventory

下面是几种可行的解决方案，覆盖不同场景的需求：

1. Next.js Middleware（推荐，Next.js 12+） #

这是全局路由拦截的最佳方案，能在请求到达页面之前完成权限验证，避免页面闪烁或不必要的渲染。

在项目根目录创建middleware.ts（或.js）：

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

export function middleware(request: NextRequest) {
  // 从Cookie中获取用户角色（根据你的实际存储方式调整，比如请求头、session等）
  const userRole = request.cookies.get('user_role')?.value;
  const targetPath = request.nextUrl.pathname;

  // 拦截/inventory路径，仅允许admin角色访问
  if (targetPath.startsWith('/inventory') && userRole !== 'admin') {
    // 重定向到首页，或者跳转到自定义的403无权限页面
    return NextResponse.redirect(new URL('/', request.url));
    // return NextResponse.rewrite(new URL('/403', request.url))
  }

  return NextResponse.next();
}

// 指定需要拦截的路由规则
export const config = {
  matcher: ['/inventory/:path*'], // 匹配/inventory下的所有子路径
};

2. 客户端页面内守卫（useEffect + useRouter） #

如果是静态页面（SSG），可以在页面组件内添加验证逻辑，不过会有短暂的页面渲染闪烁：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
// 替换成你项目中获取当前用户角色的方法（比如从Auth Context、Cookie解析）
import { getCurrentUserRole } from '../utils/auth';

export default function InventoryPage() {
  const router = useRouter();

  useEffect(() => {
    const role = getCurrentUserRole();
    if (role !== 'admin') {
      router.push('/');
      // 也可以在这里显示无权限提示，而不是直接跳转
    }
  }, [router]);

  return (
    <div>
      <h1>库存管理后台</h1>
      {/* 管理员专属内容 */}
    </div>
  );
}

3. 服务器端验证（getServerSideProps） #

对于需要SSR的页面，直接在服务器端完成权限校验，避免敏感内容泄露：

import { GetServerSideProps } from 'next';

export default function InventoryPage() {
  return (
    <div>
      <h1>库存管理后台</h1>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // 从请求Cookie中获取用户角色
  const userRole = context.req.cookies.user_role;

  // 验证不通过则重定向
  if (!userRole || userRole !== 'admin') {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  return {
    props: {}, // 传递给页面的自定义数据
  };
};

关键注意点 #

• 角色存储安全：不要用localStorage存储用户角色，建议使用HttpOnly Cookie，防止XSS攻击窃取角色信息。
• 前后端双重验证：前端路由控制只是用户体验优化，后端API必须单独验证用户角色，避免恶意用户直接调用接口。

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