NextJS启用output: export时无法使用Middleware的鉴权方案咨询

首先明确：当启用output: export时，完全无法使用Next.js Middleware。因为静态导出模式会把整个站点打包成纯静态HTML/CSS/JS文件，没有Next.js的服务器运行时环境，而Middleware依赖服务器端的执行逻辑，所以报错是必然的。

针对/admin/items/list这类管理路由的访问限制，给你几个可行的方案：

1. 客户端侧拦截（前端校验） #

在所有管理页面的组件里，添加鉴权逻辑：

• 组件挂载时，检查用户的登录状态（比如读取本地存储的token，或者调用鉴权接口验证有效性）
• 如果未登录，直接通过useRouter跳转到登录页面

举个简单的例子：

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

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

  useEffect(() => {
    // 模拟检查登录状态
    const isAuthenticated = localStorage.getItem('auth_token') !== null;
    if (!isAuthenticated) {
      router.push('/login');
    }
  }, [router]);

  // 已登录用户看到的页面内容
  return <div>管理列表页面</div>;
}

注意：这种方式只是前端层面的拦截，懂技术的用户可以通过直接查看静态文件绕过，所以必须配合后端接口的权限校验。

2. Nginx层面做路由鉴权 #

既然用Nginx部署静态文件，可以直接在Nginx配置里对/admin路径的请求做鉴权：

• 用auth_request模块：配置Nginx将请求转发到你的鉴权接口，接口返回200则允许访问，返回401/403则跳转到登录页
• 或者直接检查请求头中的token有效性（如果你的鉴权是基于token的）

示例Nginx配置片段：

location /admin/ {
    auth_request /auth/check;
    error_page 401 = @login_redirect;
}

location @login_redirect {
    return 302 /login;
}

# 这里的/auth/check是你的鉴权接口地址
location /auth/check {
    proxy_pass http://your-auth-service;
    proxy_pass_request_body off;
    proxy_set_header Content-Length "";
}

3. 后端接口强制鉴权 #

如果管理页面需要调用API接口获取数据，必须在所有管理相关的API接口中添加鉴权逻辑：

• 检查请求中的token是否有效
• 验证用户是否拥有管理员权限
• 未通过校验的请求直接返回401/403状态码

这样即使用户绕过了前端和Nginx的拦截，也无法获取到敏感数据，从根源上保证权限安全。

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