Next.js 13 app目录下Middleware实现用户权限重定向方案咨询

你的现有代码缺少对「已认证用户访问/login页面」的处理逻辑，还有几个小问题需要修正，下面是完整的实现方案：

关键修改点 #

• 定义url变量：通过request.nextUrl.clone()创建当前URL的副本，避免直接修改原请求对象
• 补充双向重定向逻辑：
  • 未认证用户访问受保护页面 → 重定向到/login
  • 已认证用户访问/login → 重定向到首页（或你指定的其他页面）
• 调整matcher范围：匹配需要保护的页面和/login页面，同时排除静态资源（避免不必要的middleware执行）

完整代码示例 #

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

export async function middleware(request: NextRequest) {
  // 这里替换成你的实际认证逻辑，比如从cookie、请求头获取并验证用户信息
  const verified = await verifyUser(request); // 示例函数，需自行实现

  const url = request.nextUrl.clone();

  // 已认证用户访问/login页面 → 重定向到首页
  if (verified && url.pathname === '/login') {
    url.pathname = '/';
    return NextResponse.redirect(url);
  }

  // 未认证用户访问受保护页面 → 重定向到/login
  if (!verified && url.pathname !== '/login') {
    url.pathname = '/login';
    return NextResponse.redirect(url);
  }

  // 其他情况正常放行
  return NextResponse.next();
}

// 示例认证函数，根据你的实际业务实现
async function verifyUser(request: NextRequest) {
  // 比如从cookie获取token并验证
  const token = request.cookies.get('auth_token')?.value;
  if (!token) return false;
  // 这里添加token验证逻辑，比如调用后端接口或JWT校验
  return true;
}

export const config = {
  matcher: [
    // 匹配所有路径，排除静态资源和API路由（可根据需求调整）
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

说明 #

• matcher使用正则排除了API路由、静态资源等不需要拦截的路径，减少middleware的执行次数
• 认证逻辑部分需要你根据实际业务替换，比如从cookie、session或请求头中获取用户认证状态
• 如果有部分页面不需要认证（比如/about），可以在matcher中排除，或者在middleware里添加额外判断

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