如何通过NextAuth与Middleware实现认证后的页面角色权限控制

需求梳理 #

需要实现以下权限规则：

• 未登录用户：无法访问/dashboard、/booking、/settings、/（首页）、/signup，需跳转至登录页
• 已登录用户：
  • 角色为USER：禁止访问/dashboard、/、/signup，访问时自动跳转至/booking
  • 角色为ADMIN：禁止访问/booking、/、/signup，访问时自动跳转至/dashboard

原代码问题分析 #

1. 路由匹配范围不足：原config.matcher未包含/和/signup，导致中间件不会处理这两个路由的权限校验
2. 判断逻辑顺序错误：startsWith("/")会匹配所有路径，放在最前面会导致后续的路由判断（如/dashboard、/booking）无法执行
3. 重复逻辑冗余：多个判断块重复处理跳转逻辑，可简化

修正后的完整代码 #

import { NextResponse } from 'next/server';
import { withAuth } from 'next-auth/middleware';

export default withAuth(
  function middleware(req) {
    const { token } = req.nextauth;
    const pathname = req.nextUrl.pathname;

    // 已登录用户访问首页或注册页时，根据角色跳转至对应页面
    if (pathname === '/' || pathname === '/signup') {
      if (token?.role === 'USER') {
        return NextResponse.redirect(new URL('/booking', req.url));
      }
      if (token?.role === 'ADMIN') {
        return NextResponse.redirect(new URL('/dashboard', req.url));
      }
    }

    // 角色权限校验：USER不能访问dashboard，ADMIN不能访问booking
    if (pathname.startsWith('/dashboard') && token?.role === 'USER') {
      return NextResponse.redirect(new URL('/booking', req.url));
    }
    if (pathname.startsWith('/booking') && token?.role === 'ADMIN') {
      return NextResponse.redirect(new URL('/dashboard', req.url));
    }

    // 若所有校验通过，允许继续访问（如settings页面）
    return NextResponse.next();
  },
  {
    callbacks: {
      // 未登录用户直接拦截，跳转至登录页
      authorized: ({ token }) => !!token,
    },
    // 指定未登录用户跳转的登录页路径
    pages: {
      signIn: '/login', // 替换为你的实际登录页路径
    },
  }
);

export const config = {
  matcher: [
    '/',
    '/signup',
    '/dashboard/:path*',
    '/booking/:path*',
    '/settings/:path*'
  ],
};

代码说明 #

1. 路由匹配：config.matcher包含了所有需要权限控制的路由，确保中间件能处理这些路径的请求
2. 首页/注册页拦截：优先判断已登录用户访问/或/signup的情况，直接跳转至对应角色的默认页面
3. 角色路由校验：针对/dashboard和/booking做角色匹配，不符合权限时跳转
4. 未登录拦截：authorized回调判断token是否存在，不存在则自动跳转至指定的登录页

内容的提问来源于stack exchange，提问作者Mohammed Ghazwan Almilhim