Next.js 实现「受保护路由(Protected Routes)」

// pages/dashboard.js 【受保护页面：必须登录才能访问】
export default function Dashboard() {
  return (
    <div>
      <h1>后台仪表盘</h1>
      <p>该页面仅登录用户可见</p>
    </div>
  )
}

// 核心：页面渲染前 服务端执行的鉴权函数
export async function getServerSideProps(context) {
  // 1. 从请求头/ cookies 中获取用户登录凭证（token）【服务端安全获取】
  // 推荐用 cookies 存储token，比 localStorage 更安全，服务端可直接读取
  const token = context.req.cookies.token || null;

  // 2. 核心鉴权逻辑：无token = 未登录
  if (!token) {
    // 3. 未登录 → 服务端重定向到登录页，禁止访问当前页面
    return {
      redirect: {
        destination: '/login', // 重定向目标页面
        permanent: false, // 是否永久重定向（固定写false即可）
      },
    };
  }

  // 可选：拓展 - 角色权限校验（管理员才能访问）
  const userRole = context.req.cookies.role;
  if (userRole !== 'admin') {
    return {
      redirect: {
        destination: '/no-permission',
        permanent: false,
      },
    };
  }

  // 4. 鉴权通过 → 正常渲染页面，可传递数据给组件
  return { props: { userRole } };
}

// utils/withAuth.js 通用鉴权高阶函数
export function withAuth(gsspFunc, requiredRole = null) {
  return async (context) => {
    // 1. 基础登录校验：获取token
    const token = context.req.cookies.token || null;
    if (!token) {
      return {
        redirect: { destination: '/login', permanent: false },
      };
    }

    // 2. 可选：角色权限校验（如果传入了requiredRole）
    if (requiredRole) {
      const userRole = context.req.cookies.role;
      if (userRole !== requiredRole) {
        return {
          redirect: { destination: '/no-permission', permanent: false },
        };
      }
    }

    // 3. 鉴权通过：如果当前页面有自己的getServerSideProps，执行并返回数据
    if (gsspFunc) {
      return await gsspFunc(context);
    }

    // 4. 鉴权通过：无额外数据，正常渲染页面
    return { props: {} };
  };
}

// pages/profile.js 受保护页面-普通用户可访问
import { withAuth } from '../utils/withAuth';

export default function Profile() {
  return <h1>个人中心 - 仅登录用户可见</h1>;
}

// 核心：复用鉴权函数，只做【登录校验】
export const getServerSideProps = withAuth();

// pages/admin.js 受保护页面-仅管理员可访问
import { withAuth } from '../utils/withAuth';

export default function Admin() {
  return <h1>管理员后台 - 仅管理员可见</h1>;
}

// 核心：复用鉴权函数，做【登录校验+角色校验】
export const getServerSideProps = withAuth(null, 'admin');

// pages/order.js 受保护页面-有自己的业务数据逻辑
import { withAuth } from '../utils/withAuth';

export default function Order({ orders }) {
  return <div>我的订单：{JSON.stringify(orders)}</div>;
}

// 核心：复用鉴权 + 保留自己的业务数据逻辑
const getOrders = async (context) => {
  const orders = [{ id: 1, name: '订单1' }]; // 模拟请求数据库
  return { props: { orders } };
};
export const getServerSideProps = withAuth(getOrders);

// middleware.js 【根目录，全局路由中间件】
import { NextResponse } from 'next/server';
import { cookies } from 'next/headers';

// 核心：配置【需要保护的路由列表】
const protectedRoutes = ['/dashboard', '/profile', '/admin', '/orders'];
// 核心：配置【公开路由列表】（无需鉴权，所有人可访问）
const publicRoutes = ['/', '/login', '/register', '/about'];

export function middleware(request) {
  // 1. 获取当前访问的路由路径
  const path = request.nextUrl.pathname;
  // 2. 判断当前路径是否是受保护路由/公开路由
  const isProtectedRoute = protectedRoutes.includes(path);
  const isPublicRoute = publicRoutes.includes(path);

  // 3. 服务端安全获取用户登录凭证（token/role）
  const cookieStore = cookies();
  const token = cookieStore.get('token')?.value; // 从cookies获取token
  const userRole = cookieStore.get('role')?.value; // 从cookies获取角色

  // 4. 核心鉴权逻辑 - 分场景处理
  // 场景1：访问受保护路由 + 未登录（无token） → 重定向到登录页
  if (isProtectedRoute && !token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 场景2：访问受保护路由 + 已登录 + 角色权限校验（仅/admin需要管理员）
  if (path === '/admin' && userRole !== 'admin') {
    return NextResponse.redirect(new URL('/no-permission', request.url));
  }

  // 场景3：已登录状态下，访问登录页 → 重定向到首页（避免重复登录）
  if (isPublicRoute && path === '/login' && token) {
    return NextResponse.redirect(new URL('/', request.url));
  }

  // 场景4：所有校验通过 → 允许访问，放行请求
  return NextResponse.next();
}

// 关键配置：指定中间件生效的路由范围（必写）
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

// 项目目录结构
├── app/
│   ├── page.js → 首页 / (公开)
│   ├── login/page.js → 登录页 /login (公开)
│   ├── dashboard/page.js → 仪表盘 /dashboard (受保护)
│   ├── profile/page.js → 个人中心 /profile (受保护)
│   ├── admin/page.js → 管理员后台 /admin (受保护+角色校验)
│   └── no-permission/page.js → 无权限页 /no-permission (公开)
├── middleware.js → 全局鉴权中间件（根目录）

// app/dashboard/page.js 受保护页面，无任何鉴权代码
export default function Dashboard() {
  return <h1>后台仪表盘 - 已登录用户可见</h1>;
}

// 登录页面的登录按钮点击事件（通用）
const handleLogin = async () => {
  // 1. 模拟请求后端接口，获取token和role
  const res = await fetch('/api/login', { method: 'POST', body: { username, password } });
  const { token, role } = await res.json();

  // 2. 写入cookies（Next.js 提供的便捷方式，客户端/服务端均可）
  document.cookie = `token=${token}; path=/; max-age=86400`; // 有效期1天
  document.cookie = `role=${role}; path=/; max-age=86400`;

  // 3. 登录成功，重定向到首页/目标页
  window.location.href = '/';
};

const handleLogout = () => {
  // 清除登录凭证
  document.cookie = 'token=; path=/; max-age=0';
  document.cookie = 'role=; path=/; max-age=0';
  // 重定向到登录页
  window.location.href = '/login';
};